Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: How to show a tooltip for an entire row in grid?

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    1

    Question Answered: How to show a tooltip for an entire row in grid?

    Hi all,
    I am trying to achieve the following. Need to show a grid with several columns.
    For each row in this grid I need to show a tooltip.

    Can you suggest me a solution for that.
    Thanks a lot in advance.
    PS Ext JS 4.0.2

  2. Here's one option:

    Code:
    Ext.tip.QuickTipManager.init();
    
    ...
    
    Ext.create('Ext.grid.Panel', {
        ...
        listeners: {
            itemmouseenter: function(view, record, item) {
                Ext.fly(item).set({'data-qtip': 'My tooltip: ' + record.get('name')});
            }
        }
    });

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Here's one option:

    Code:
    Ext.tip.QuickTipManager.init();
    
    ...
    
    Ext.create('Ext.grid.Panel', {
        ...
        listeners: {
            itemmouseenter: function(view, record, item) {
                Ext.fly(item).set({'data-qtip': 'My tooltip: ' + record.get('name')});
            }
        }
    });

  4. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    9

    Exclamation urgent

    Thx a lot. We have found a little bit different way to show tooltip for the row. But actually we have another problem:

    When mouse moves over some grid row out tooltip appear and change the value depending on row record content - great and it works. But the last column of the grid is 'actioncolumn' that contains icon as a child with its own tooltip 'Action column icon tooltip va'.

    Code:
    ...
     xtype: 'actioncolumn',
    items: [ {
           tooltip: ''Action column icon tooltip value',
           handler: function(view, rowIndex, colIndex, item, e) {
              ...
           },
           getClass: function(v, meta, rec, rowIndex, colIndex, store)
                 return 'icon-open-item';
           }
    }]
    And now we have not appropriate behavoir of two tooltips (grid row tooltip and icon tooltip): 'icon tooltip' doesn't appear in case of mouseover on the icon, and we can see only 'grid row tooltip'.

  5. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    9

    Post Grid row tooltip

    Just for info. We use the following way to achive tooltip functionality:

    This is code from controller:

    Code:
    this.control({
                'baseProjectGrid': {
                    render: function(view) {
                        view.tip = Ext.create('Ext.tip.ToolTip', {
                        target: view.el,                        // The overall target element.
                        delegate: view.view.itemSelector,       // Each grid row causes its own seperate show and hide.
                        trackMouse: true,                       // Moving within the row should not hide the tip.
                        renderTo: Ext.getBody(),                // Render immediately so that tip.body can be referenced prior to the first show.
                         showDelay: 1000,
                          listeners: {                            // Change content dynamically depending on which element triggered the show.
                              beforeshow: function updateTipBody(tip) {
                                    tip.update(view.view.getRecord(tip.triggerElement).get('desc'));
                              }
                      }
               });
    }
    It differents from the suggested way, but it also works.

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Can you turn off the row tooltip and confirm that the actioncolumn tooltip works fine on its own?

    You haven't posted the code you're using to register the row tooltip so I can't really suggest anything specific. A general approach that would work would be to add tooltips to each of the grid cells rather than the whole row. This is usually done by adding a data-qtip attribute to the metadata in the renderer. However, that seems like quite an inefficient way to do it.

  7. #6
    Sencha User
    Join Date
    Jul 2011
    Posts
    9

    Default

    Quote Originally Posted by skirtle View Post
    Can you turn off the row tooltip and confirm that the actioncolumn tooltip works fine on its own?

    You haven't posted the code you're using to register the row tooltip so I can't really suggest anything specific. A general approach that would work would be to add tooltips to each of the grid cells rather than the whole row. This is usually done by adding a data-qtip attribute to the metadata in the renderer. However, that seems like quite an inefficient way to do it.
    That's right. We need the same tooltip text for the whole row (that shows e.g. "description"). But 'actioncolumn' contains elements with its own tooltip text.
    With our row tooltip creation procedure we have the following behaviour: when we put mouse over 'icon' then we can see 2 tooltips at the same time: first one is row tooltip, and second one - icon tooltip. As you can imagine this no actually good behaviour.

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Seems our posts crossed.

    I don't have time to test it right now but I have one thought based on your code. You could use a CSS selector up from triggerElement to check whether the triggerElement is inside the actioncolumn. Figuring out the right selector will need a quick play with Firebug.

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Actually, that won't work but a variation on the theme might.

    Try extending the delegate to include the actioncolumn elements. I would guess that triggerElement would then be the actioncolumn element in the case when you're over the actioncolumn. Then you can detect it and return false.

  10. #9
    Sencha User
    Join Date
    Jul 2011
    Posts
    9

    Default

    Yes, probably this really good suggestions, but at the moment I have some problems with that.
    Look, as I find out 'delegate' refere to '.x-grid-row' CSS style.
    We have to extend this with the icon style '.x-action-col-icon'.
    Unfortunately I'm not familiar with CSS item selector styles, therefore my question is: how to write this item selector query correctly (e.g. '.x-grid-row, .x-action-col-icon' - it doesn't work)?

    Note: if we will just replace old value with the new one 'x-action-col-icon' then tooltip will appear just when mouse is over icon. Therefore it seems that we are on the right way.

    tooltip.jpg

    Thx in advance for your help.

  11. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    OK, I've tried all sorts of combinations but I could only find one that worked. I don't like it much but at least it's short.


    Code:
    Ext.tip.QuickTipManager.init();
    
    Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
        showDelay: 1000,
        trackMouse: true
    });
    
    ...
    
    this.control({
        baseProjectGrid: {
            itemmouseenter: function(view, record, item) {
                Ext.fly(item).select('.x-grid-cell:not(.x-action-col-cell)').set({'data-qtip': record.get('desc')});
            }
        }
    });

Page 1 of 2 12 LastLast

Posting Permissions

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