How to add a tooltip/hoverover to a filter for a grid column Extjs

Question

I have a grid panel with columns containing filters I want to add a hover on the filter. How can I achieve this. I tried adding tooltip it didn't work. Any suggestions please.

See fiddle

user3487063 user3487063 · Accepted Answer · 2017-05-23T19:08:21

If you want to add tooltip on Filters menu item then you can override Ext.grid.filters.Filters

Ext.override(Ext.grid.filters.Filters,{
     createMenuItem: function (menu, parentTableId) {
        var me = this,
            item;

        // only add separator if there are other menu items 
        if (menu.items.length) {
            me.sep = menu.add('-');
        }
        item = menu.add({
            checked: false,
            itemId: 'filters',
            text:me.menuFilterText,
            tooltip:'On blank space filters data with empty fields ',
            listeners: {
                scope: me,
                checkchange: me.onCheckChange
            }
        });

        return (me.filterMenuItem[parentTableId] = item);
    }
});

if you want to have tooltip on Search Textbox then following would do:

 {
        xtype: 'gridcolumn',
        dataIndex: 'myField',
        text: 'My Field',
        filter: {
            type: 'string',
             itemDefaults: {
                 inputAttrTpl: " data-qtip='On blank space filters data with empty fields' ",
            }

        }
    }

Link to forked fiddle : https://fiddle.sencha.com/#view/editor&fiddle/204o Used Ext JS 5.1.1.451 - Neptune

How to add a tooltip/hoverover to a filter for a grid column Extjs

1 Answers