ExtJS — add tooltip to grid column header

Question

I am using ExtJS 5. I have a dynamic grid meaning the column configurations, store fields, data etc are all coming from the backend.

Before I reconfigure the grid with the columns, I try to add a tooltip to the header using the data-qtip attribute but this does not work.

Here is the fiddle: https://fiddle.sencha.com/#fiddle/1fr8

Snippet:

var cols = data_1.metaData.columns;
for(var i=0;i<cols.length;i++){
   cols[i].header = "<font data-qtip='"+cols[i].header+"'>"+cols[i].header+"</font>";
}
grid.reconfigure(null, cols);       
store.getProxy().data =data_1.data;
store.loadPage(1)
grid.getView().refresh();

Thanks!

Answer 1

Please don't overcomplicate things, the gridcolumn has a tooltip configuration which should work.

  for(var i=0;i<cols.length;i++){
      cols[i].tooltip = cols[i].header;
  }

It doesn't work in your case, because the QuickTipManager has to be initialized first in Ext.onReady:

Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();
    var store = ...

Please note that the header config in gridcolumn has been deprecated in favor of the text config.

Answer 2

You can also override initRenderData to set this application-wide. For example to always use the column text as a tooltip:

    /**
     * If a tooltip has not been set for a column header
     * then always default to the column name
     **/
    Ext.override(Ext.grid.column.Column, {
        initRenderData: function () {
    
            var me = this;
    
            if (Ext.isEmpty(me.tooltip)) {
                me.tooltip = me.text;
            }
    
            return me.callParent(arguments);
        }
    });