Results 1 to 8 of 8

Thread: Disable tooltip hiding on mouse is over it

  1. #1
    Ext User
    Join Date
    Sep 2008
    Location
    Bangalore, India
    Posts
    17

    Question Disable tooltip hiding on mouse is over it

    I am working on a grid, which shows a tooltip on cell mouseover event.
    I have provided a 'details' hyperlink on the tooltip, but I am not able to click on them, since the tooltip will hide when mouse is taken over it.
    Look at the attached screenshot.

    Anyone please help, how can I allow a user to click on the tooltip hyperlink.

    [IMG]file:///C:/Documents%20and%20Settings/abdulrahim.k/Desktop/tooltip.GIF[/IMG][IMG]file:///C:/Documents%20and%20Settings/abdulrahim.k/Desktop/tooltip.GIF[/IMG]
    [IMG]file:///C:/DOCUME%7E1/ABDULR%7E1.K/LOCALS%7E1/Temp/moz-screenshot-1.jpg[/IMG]
    Attached Images Attached Images

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext User
    Join Date
    Sep 2008
    Location
    Bangalore, India
    Posts
    17

    Question Disable tooltip hiding when mouse is over tooltip

    My grid shows a tooltip on cell mouseover event.
    And I've given details link in the tooltip. But when I take my mouse on the tooltip to click that link, the tooltip hides. How can I prevent it from hiding?

    The code is as follows:

    Ext.onReady(function(){

    var companyData = [
    ['ABC','2.0','9/1/2004 14:30am','Service'],
    ['XYZ','2.5','5/10/2008 12:30am','Product'],
    ['PQR','1.0','4/11/2007 01:10am','Service'],
    ['MNO','3.0','7/10/2005 06:20am','Product'],
    ['DEF','2.4','8/3/2006 09:00am','Service'],
    ['HIJ','2.5','5/10/2008 12:30am','Product'],
    ['STU','1.0','4/11/2007 01:10am','Service'],
    ['VWX','3.0','7/10/2005 06:20am','Product'],
    ['PQR','1.0','4/11/2007 01:10am','Service'],
    ['MNO','3.0','7/10/2005 06:20am','Product'],
    ['XYZ','2.5','5/10/2008 12:30am','Product'],
    ['PQR','1.0','4/11/2007 01:10am','Service'],
    ['MNO','3.0','7/10/2005 06:20am','Product'],
    ['DEF','2.4','8/3/2006 09:00am','Service'],
    ['HIJ','2.5','5/10/2008 12:30am','Product'],
    ['STU','1.0','4/11/2007 01:10am','Service'],
    ['VWX','3.0','7/10/2005 06:20am','Product'],
    ['PQR','1.0','4/11/2007 01:10am','Service']
    ];

    var store = new Ext.data.Store({
    proxy: new Ext.data.PagingMemoryProxy(companyData),
    reader: new Ext.data.ArrayReader({}, [
    {name: 'company'},
    {name: 'Revenue'},
    {name: 'SDate', type: 'date', dateFormat: 'n/j/Y h:ia'},
    {name: 'Type'}
    ])
    });

    var colModel = new Ext.grid.ColumnModel([
    {id:'company', header: "Company Name", width: 120, sortable: true, dataIndex: 'company'},
    {id:'annualRevenue', header: "Annual Revenue (In USD)", width: 120, sortable: true, dataIndex: 'Revenue'},
    {id:'startDate', header: "Start Date", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'SDate'},
    {id:'type', header : "Type", width : 50, sortable : true, dataIndex : 'Type'}
    ]);


    Ext.ToolTip.prototype.onTargetOver =
    Ext.ToolTip.prototype.onTargetOver.createInterceptor(function(e) {
    this.baseTarget = e.getTarget();
    });
    Ext.ToolTip.prototype.onMouseMove =
    Ext.ToolTip.prototype.onMouseMove.createInterceptor(function(e) {
    if (!e.within(this.baseTarget)) {
    this.onTargetOver(e);
    return false;
    }
    });

    var rowContextMenu = new Ext.menu.Menu();

    var bbar = new Ext.PagingToolbar({
    pageSize: 5,
    store: store,
    displayInfo: true,
    displayMsg: 'Mostrando pedidos pendentes {0} - {1} de {2}',
    emptyMsg: 'N

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255

    Default

    I didn't just post that link for fun, go and have a look at it
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Ext User
    Join Date
    Sep 2008
    Location
    Bangalore, India
    Posts
    17

    Question Disable tooltip hiding when mouse is over tooltip

    My grid shows a tooltip on cell mouseover event.
    And I've given details link in the tooltip. But when I take my mouse on the tooltip to click that link, the tooltip hides. How can I prevent it from hiding?

    The code is as follows:

    Ext.onReady(function(){

    var companyData = [
    ['ABC','2.0','9/1/2004 14:30am','Service'],
    ['XYZ','2.5','5/10/2008 12:30am','Product'],
    ['PQR','1.0','4/11/2007 01:10am','Service'],
    ['MNO','3.0','7/10/2005 06:20am','Product'],
    ['DEF','2.4','8/3/2006 09:00am','Service'],
    ['HIJ','2.5','5/10/2008 12:30am','Product'],
    ['STU','1.0','4/11/2007 01:10am','Service'],
    ['VWX','3.0','7/10/2005 06:20am','Product'],
    ['PQR','1.0','4/11/2007 01:10am','Service'],
    ['MNO','3.0','7/10/2005 06:20am','Product'],
    ['XYZ','2.5','5/10/2008 12:30am','Product'],
    ['PQR','1.0','4/11/2007 01:10am','Service'],
    ['MNO','3.0','7/10/2005 06:20am','Product'],
    ['DEF','2.4','8/3/2006 09:00am','Service'],
    ['HIJ','2.5','5/10/2008 12:30am','Product'],
    ['STU','1.0','4/11/2007 01:10am','Service'],
    ['VWX','3.0','7/10/2005 06:20am','Product'],
    ['PQR','1.0','4/11/2007 01:10am','Service']
    ];

    var store = new Ext.data.Store({
    proxy: new Ext.data.PagingMemoryProxy(companyData),
    reader: new Ext.data.ArrayReader({}, [
    {name: 'company'},
    {name: 'Revenue'},
    {name: 'SDate', type: 'date', dateFormat: 'n/j/Y h:ia'},
    {name: 'Type'}
    ])
    });

    var colModel = new Ext.grid.ColumnModel([
    {id:'company', header: "Company Name", width: 120, sortable: true, dataIndex: 'company'},
    {id:'annualRevenue', header: "Annual Revenue (In USD)", width: 120, sortable: true, dataIndex: 'Revenue'},
    {id:'startDate', header: "Start Date", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'SDate'},
    {id:'type', header : "Type", width : 50, sortable : true, dataIndex : 'Type'}
    ]);


    Ext.ToolTip.prototype.onTargetOver =
    Ext.ToolTip.prototype.onTargetOver.createInterceptor(function(e) {
    this.baseTarget = e.getTarget();
    });
    Ext.ToolTip.prototype.onMouseMove =
    Ext.ToolTip.prototype.onMouseMove.createInterceptor(function(e) {
    if (!e.within(this.baseTarget)) {
    this.onTargetOver(e);
    return false;
    }
    });

    var rowContextMenu = new Ext.menu.Menu();

    var bbar = new Ext.PagingToolbar({
    pageSize: 5,
    store: store,
    displayInfo: true,
    displayMsg: 'Mostrando pedidos pendentes {0} - {1} de {2}',
    emptyMsg: 'N

  6. #6
    Ext User
    Join Date
    Sep 2008
    Location
    Bangalore, India
    Posts
    17

    Default

    I have read that link, but it could not solve my problem. I've tried using that 'autoHide' property. But, my requirement is to allow mouse over the tooltip.
    If I use autoHide:false, tooltip will not hide and also it keeps displaying only one data (until I close it) even if I 've moved the mouse to other location.

  7. #7
    Ext User
    Join Date
    Sep 2008
    Location
    Bangalore, India
    Posts
    17

    Question Disable tooltip hiding when mouse is over tooltip

    As I've told above, I've a grid and a tooltip is shown on cell mouse over event of Grid. For each row, different info is displayed in tooltip. I need to implement tooltip that disappears when the user points anywhere on the page, but it should stay when the user hovers over tooltip as I have a link inside tooltip . The only options I found to close tooltip is to specify autoHide=true, or closeable=true. I need to hide tooltip when the user point mouse anywhere on the page but tooltip, as I . Any suggestions?

  8. #8

    Join Date
    Aug 2007
    Location
    Romania
    Posts
    41

    Default

    I would like to do the same, stop the tooltip from hiding if I mouse over it.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •