tooltip function getTip() not working on actioncolumn Extjs 7.X

Question

The tooltip function getTip is not working for me.

I initialized Ext.tip.QuickTipManager.init(); in my app.json launch function.

My actioncolumn is looking like this:

xtype: 'actioncolumn',
getTip: function(value, metadata, record, rowIndex, colIndex, store) {
    return "something";
},
flex: 0.75,
style: 'text-align: left;',
width: 25,
align: 'center',
menuDisabled: true,
bind: {
    text: '{filename}'
},
items: [
    {
        handler: function(view, rowIndex, colIndex, item, e, record, row) {
            Application.fireEvent("filefunction", view, rowIndex, colIndex, item, e, record, row);
        },
        getClass: function(v, metadata, r, rowIndex, colIndex, store) {
        return "x-far fa-file-alt";
        },
        iconCls: 'x-far fa-file-alt'
    }
]

It does not call the getTip() function at all. What am i doing wrong?

The docs:

getTip() Documentation by Sencha

Answer 1

The getTip function will only work if your action column does not have items, only a single icon. For example, modifying your code like this does display the tooltip:

{
    xtype: 'actioncolumn',
    // this works with items, with one icon
    getTip: function(value, metadata, record, rowIndex, colIndex, store) {
        return "something";
    },
    iconCls: 'x-far fa-file-alt',
    flex: 0.75,
    style: 'text-align: left;',
    width: 25,
    align: 'center',
    menuDisabled: true,
    bind: {
        text: '{filename}'
    },
}

If you have multiple items in the action column, you have to define tooltip separately for each item. You can set the tooltip for one item in the action column using the tooltip configuration:

{
    xtype: 'actioncolumn',
    flex: 0.75,
    style: 'text-align: left;',
    width: 25,
    align: 'center',
    menuDisabled: true,
    bind: {
        text: '{filename}'
    },
    items: [
        {
            handler: function(view, rowIndex, colIndex, item, e, record, row) {
                Application.fireEvent("filefunction", view, rowIndex, colIndex, item, e, record, row);
            },
            getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                return "x-far fa-file-alt";
            },
            iconCls: 'x-far fa-file-alt',
            // add this for fixed tooltip on the item
            tooltip: 'something',
        }
    ]
}

This is a static tooltip, fixed for one action in the column. If you need it dynamic, for example dependant on the record value, you can use the getClass function for that for each item:

{
    xtype: 'actioncolumn',
    flex: 0.75,
    style: 'text-align: left;',
    width: 25,
    align: 'center',
    menuDisabled: true,
    bind: {
        text: '{filename}'
    },
    items: [
        {
            handler: function(view, rowIndex, colIndex, item, e, record, row) {
                Application.fireEvent("filefunction", view, rowIndex, colIndex, item, e, record, row);
            },
            getClass: function(v, meta, r, rowIndex, colIndex, store) {
                // set dynamic tooltip with these two lines
                var tooltip = 'something dynamic';
                meta.tdAttr = Ext.String.format('data-qtip="{0}"', tooltip);
                return "x-far fa-file-alt";
            },
            iconCls: 'x-far fa-file-alt'
        }
    ]
}