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!

Alexander · Accepted Answer · 2016-09-08 23:13:33Z

4

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.

answered Sep 8, 2016 at 23:13

Alexander

20.3k21 gold badges86 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

geographika · Accepted Answer · 2021-02-25 12:12:43Z

1

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

answered Feb 25, 2021 at 12:12

geographika

6,5284 gold badges43 silver badges59 bronze badges

Collectives™ on Stack Overflow

ExtJS -- add tooltip to grid column header

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related