Ext.ux.grid.HeaderToolTip

[deister]

A very simple extension to add tooltips to grid column headers:

/**
 * @class Ext.ux.grid.HeaderToolTip
 * @namespace Ext.ux.grid
 *
 *  Text tooltips should be stored in the grid column definition
 */
Ext.define('Ext.ux.grid.HeaderToolTip', {
    alias: 'plugin.headertooltip',
    init : function(grid) {
        var headerCt = grid.headerCt
        grid.headerCt.on("afterrender", function(g) {
            grid.tip = Ext.create('Ext.tip.ToolTip', {
                target: headerCt.el,
                delegate: ".x-column-header",
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    beforeshow: function(tip) {
                        var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id  +']');
                        if (c  && c.tooltip)
                            tip.update(c.tooltip);
                        else
                            return false;
                    }
                }
            });
        })
    }
});

[cntx]

pretty nice, thx

[asmweb]

Hello,

I can not make it work using a MVC app. It fails on init function...

[twaindev]

Perhaps it's failing because this line

var headerCt = grid.headerCt

is missing a semi-colon.

After fixing this it works in my MVC app.

Here is my version:

/**
* @class Ext.ux.grid.HeaderToolTip
* @namespace Ext.ux.grid
*
*  Text tooltips should be stored in the grid column definition
*/
Ext.define('Ext.ux.grid.HeaderToolTip', {
    alias: 'plugin.headertooltip',

    init: function (grid) {
        var headerCt = grid.headerCt;

        headerCt.on("afterrender", function () {
            grid.tip = Ext.create('Ext.tip.ToolTip', {
                target: headerCt.el,
                delegate: ".x-column-header",
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    beforeshow: function (tip) {
                        var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id + ']');

                        if (c) {
                            tip.update(c.tooltip || c.text);
                            return true;
                        }

                        return false;
                    }
                }
            });
        });
    }
});

[asmweb]

Hi there, thank you for your answer but I could manage to make it work by myself. Misstypo problem.

[c2c-bacardi]

Right away I experienced an issue where hovering between a column with a tooltip and one without a tooltip would prevent the tooltip from showing again until you mouse out from the header container and mouse back in.

Adding tip.clearTimers() before returning false in the beforeshow event addressed this issue:

/**
 * @class Ext.ux.grid.HeaderToolTip
 * @namespace ux.grid
 *
 *  Text tooltips should be stored in the grid column definition
 *
 *  Sencha forum url:
 *  http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip
 */
Ext.define('Ext.ux.grid.HeaderToolTip', {
    alias: 'plugin.headertooltip',
    init : function(grid) {
        var headerCt = grid.headerCt;
        grid.headerCt.on("afterrender", function(g) {
            grid.tip = Ext.create('Ext.tip.ToolTip', {
                target: headerCt.el,
                delegate: ".x-column-header",
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    beforeshow: function(tip) {
                        var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id  +']');
                        if (c && c.tooltip) {                            
                            tip.update(c.tooltip);
                        } else {
                            tip.clearTimers();
                            return false;
                        }
                    }
                }
            });
        });
    }
});

[usmanc]

My deepest apologies for such a noob question (and I feel dumb for asking) but how do I use this extension? requires: ['Ext.ux.grid.HeaderToolTip']? plugins: ['Ext.ux.grid.HeaderToolTip']?

And then tooltip in the column definition?
columns: [{text : 'Name', flex:1, sortable : true, dataIndex: 'personName', tooltip: 'test'}]

No combination I try is working and I am starting the QuickTipManager... Ext.tip.QuickTipManager.init(); at the top.

Right away I experienced an issue where hovering between a column with a tooltip and one without a tooltip would prevent the tooltip from showing again until you mouse out from the header container and mouse back in.

Adding tip.clearTimers() before returning false in the beforeshow event addressed this issue:

[c2c-bacardi]

I use:

plugins: ['headertooltip']

-Kevin

[usmanc]

Thank you, Kevin!

[rebel-l]

I have had a problem with locked columns, because headerCt is moved into "sub grids" on locking. See my fixed version:

/**
 * @class Ext.ux.grid.HeaderToolTip
 * @namespace ux.grid
 *
 *  Text tooltips should be stored in the grid column definition
 *
 *  Sencha forum url:
 *  http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip
 */
Ext.define('Ext.ux.grid.HeaderToolTip', {
    alias: 'plugin.headertooltip',
    init : function(grid){
        if( grid.headerCt ) {
            this.initColumnHeaders( grid.headerCt, grid );
        } else if( grid.lockable ){
            this.initColumnHeaders( grid.lockedGrid.headerCt, grid );
            this.initColumnHeaders( grid.normalGrid.headerCt, grid );
        }
    },
    initColumnHeaders: function( headerCt, grid ) {
        headerCt.on("afterrender", function(g) {
            grid.tip = Ext.create('Ext.tip.ToolTip', {
                target: headerCt.el,
                delegate: ".x-column-header",
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    beforeshow: function(tip) {
                        var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id  +']');
                        if (c && c.tooltip) {
                            tip.update(c.tooltip);
                        } else {
                            tip.clearTimers();
                            return false;
                        }
                    }
                }
            });
        });
    }
});

... works with 4.0.7, with 4.1.1 it isn't working because of missing clone() method. has anybody a workaround for that?