How to show tooltip for grid cells?

Question

I have a grid and when doing a mouseover on a cell a tooltip shows up for each cell. That works great. However, I have couple issues:

1) I only want to show tooltips for cells under the flag column.

2) If a cell doesn't have a value don't show a tooltip.

3) Finally how to make the tooltip go away only when doing a mouseout from the cell Thanks a lot in advance!

Here's my working code: LIVE DEMO

Code snippet:

grid.tip = Ext.create('Ext.tip.ToolTip', {
    target: view.el,
    delegate: '.x-grid-cell',
    trackMouse: true,
    listeners: {
        beforeshow: function updateTipBody(tip) {
            if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                header = grid.headerCt.getGridColumns()[grid.cellIndex];
                tip.update(grid.getStore().getAt(grid.recordIndex).get(header.dataIndex));
            }
        }
    }
});

score 2 · Accepted Answer · answered May 16 '18 at 01:24

1) You have to add a custom CSS class to your grid cells through a renderer and then use that CSS class as a delegate for your tooltip.

2) You have full control over the cells you want to add the CSS class to based on the value or other record values in the renderer. Do not add the custom CSS class to the grid cell if the value is empty.

3) hideDelay: 0 on the tooltip.

Required code changes:

dataIndex: 'color',
renderer: function(v, meta) {
    if(v) meta.tdCls = 'customCls';
    return v;
}

and

target: view.el,
delegate: '.customCls',
trackMouse: true,
hideDelay: 0,

However, there seem to be issues with the uievent, at least in Firefox, that you should be aware of. The event is not always fired as expected, sometimes it is not fired again when moving between columns of the same row, sometimes it is fired with columnIndex = -1 when moving between rows. The following screenshot has been taken on your sample page:

There is another, less hacky and more supported possibility to implement this: Add quicktips directly in the renderer.

For this, remove all your custom tooltip code.

Add to the renderer a data-qtip attribute:

dataIndex: 'color',
renderer: function(value, meta, record) {
    if(value) meta.tdAttr='data-qtip="'+value+'"';
    return value;
}

You can modify the hideDelay in the QuickTipManager as shown in the sample code from the QuickTipManager documentation:

// Init the singleton.  Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();

// Apply a set of config properties to the singleton
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
    hideDelay: 0
});

Relevant fiddle

perfect thanks a lot! one quick question. Do you know how to get the tooltip to disappear only when doing a mouseleave (mouse away)? I mean how to keep it showing and make it go away only when moving the mouse away — Devmix, May 16 '18 at 03:26
@progx That's what `hideDelay:0` does. That's how it's documented and at least for me, it works. — Alexander, May 16 '18 at 06:36

score 1 · Answer 2 · answered May 16 '18 at 13:32

You don't need to wrire an extra code for tool tip just for Flag column write render function and in the write a condition to show only for not empty values. like

{
                    text: 'Flag',
                    flex: 1,
                    dataIndex: 'color',
                    renderer: function(value, meta, record) {
                        if(!Ext.isEmpty(value)) 
                            meta.tdAttr='data-qtip="'+value+'"';

                        return value;
                    }
                }

How to show tooltip for grid cells?

2 Answers2