Search code examples
javascriptextjsextjs4tooltipextjs5

How to show tooltip for grid cells?

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));
            }
        }
    }
});
Solution

  • 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