Is there a way to customize the tooltip in the Ext.grid.column.action?

Is there a way to customize the tooltip in the Ext.grid.column.Action? I'd like to set the autoHide to false.

Thanks in Advance

You can by overriding or extending the ActionColumn.

You can see from the QuickTipManager docs that if you set a data item, data-hide="user" is the equivelent of autoHide=false.

The ActionColumn doesn't expose that functionality, it just uses the defaults, so we have to override the ActionColumns's defaultRenderer.

The defaultRenderer is a protected template function, so we can provide our own renderer and a custom config.

Start by copying the existing defaultRenderer source from the ActionColumn and then adding a few lines to handle our new config.

We can add a custom tooltipAutoHide config to the action config. Then in the defaultRenderer, we can read that config, defaulting to true, and render out data-hide="user" if tooltipAutoHide:false is set.

Here is an example. The relevant lines are

Read the config

//Get custom 'tooltipAutoHide' config from tip
                tooltipAutoHide = item.tooltipAutoHide === false ? false : true;

Render out 'data-hide="user"' if false

// write data-hide=user == autoHide:false 
                    (!tooltipAutoHide ? ' data-hide="user"' : '') +

In column definition, set tooltipAutoHide:true

{
  xtype:'myactioncolumn',
enter code here  items:[{
   tooltip: 'Edit',
   tooltipAutoHide: false
  }]
}

Here is the full sample

        Ext.define('Ext.ux.column.MyActionColumn', {
        extend: 'Ext.grid.column.Action',
        
        xtype: 'myactioncolumn',

        defaultRenderer: function (v, cellValues, record, rowIdx, colIdx, store, view) {
            var me = this,
                scope = me.origScope || me,
                items = me.items,
                len = items.length,
                i, item, ret, disabled, tooltip, altText, icon, glyph, tabIndex, ariaRole;

            // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
            // Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
            // we will pass an incorrect value to getClass/getTip
            ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';

            cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
            for (i = 0; i < len; i++) {
                item = items[i];
                icon = item.icon;
                glyph = item.glyph;

                disabled = item.disabled || (item.isDisabled ? Ext.callback(item.isDisabled, item.scope || me.origScope, [view, rowIdx, colIdx, item, record], 0, me) : false);
                tooltip = item.tooltip || (item.getTip ? Ext.callback(item.getTip, item.scope || me.origScope, arguments, 0, me) : null);
                // 
                //Get custom 'tooltipAutoHide' config from tip
                tooltipAutoHide = item.tooltipAutoHide === false ? false : true;
                console.log(tooltipAutoHide);
                altText = item.getAltText ? Ext.callback(item.getAltText, item.scope || me.origScope, arguments, 0, me) : item.altText || me.altText;

                // Only process the item action setup once.
                if (!item.hasActionConfiguration) {
                    // Apply our documented default to all items
                    item.stopSelection = me.stopSelection;
                    item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
                    item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
                    item.hasActionConfiguration = true;
                }

                // If the ActionItem is using a glyph, convert it to an Ext.Glyph instance so we can extract the data easily.
                if (glyph) {
                    glyph = Ext.Glyph.fly(glyph);
                }

                // Pull in tabIndex and ariarRols from item, unless the item is this, in which case
                // that would be wrong, and the icon would get column header values.
                tabIndex = (item !== me && item.tabIndex !== undefined) ? item.tabIndex : me.itemTabIndex;
                ariaRole = (item !== me && item.ariaRole !== undefined) ? item.ariaRole : me.itemAriaRole;

                ret += '<' + (icon ? 'img' : 'div') +
                    (typeof tabIndex === 'number' ? ' tabIndex="' + tabIndex + '"' : '') +
                    (ariaRole ? ' role="' + ariaRole + '"' : ' role="presentation"') +
                    (icon ? (' alt="' + altText + '" src="' + item.icon + '"') : '') +
                    ' class="' + me.actionIconCls + ' ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' +
                    (disabled ? me.disabledCls + ' ' : ' ') +
                    (item.hidden ? Ext.baseCSSPrefix + 'hidden-display ' : '') +
                    (item.getClass ? Ext.callback(item.getClass, item.scope || me.origScope, arguments, undefined, me) : (item.iconCls || me.iconCls || '')) + '"' +
                    (tooltip ? ' data-qtip="' + tooltip + '"' : '') + 
                    // write data-hide=user == autoHide:false 
                    (!tooltipAutoHide ? ' data-hide="user"' : '') +
                    (icon ? '/>' : glyph ? (' style="font-family:' + glyph.fontFamily + '">' + glyph.character + '</div>') : '></div>');
            }

            return ret;
        }
    });

Ext.create('Ext.grid.Panel', {
        title: 'Action Column Demo',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [{
            text: 'First Name',
            dataIndex: 'firstname'
        }, {
            text: 'Last Name',
            dataIndex: 'lastname'
        }, {
            xtype: 'myactioncolumn',
            width: 50,
            items: [{
                iconCls: 'x-fa fa-cog',
                tooltip: 'Edit',
                tooltipAutoHide: false,
                handler: function (grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Edit " + rec.get('firstname'));
                }
            }]
        }],
        width: 250,
        renderTo: Ext.getBody()
    });

Here's a working Sencha Fiddle example.