Tooltip not showing when enabling a button

Question

After upgrading from Ext5 to 7.2 it is no longer possible to see a tooltip after programatically enabling a button.

Ext.define('X', {
extend: 'Ext.panel.Panel',

initComponent: function() {
    this.tbar = [{
        text: 'Foo',
        disabled: true,
        itemId: 'fooBtn',
        tooltip: 'FooTip',
        handler: function(btn){
            this.setHtml('Test')
        },
        scope: this
    },
    {
        text: 'Bar',
        tooltip: 'BarTip',
        handler: function(btn) {
            this.down('#fooBtn').enable();
        },
        scope: this
    }];
    this.callParent();
}
});

Ext.application({
name: 'Fiddle',

launch: function() {
    new X({
        renderTo: document.body,
        title: 'Foo',
        width: 200,
        height: 200
    });
 }
});

https://fiddle.sencha.com/#view/editor&fiddle/37o5

score 0 · Answer 1 · answered Aug 03 '20 at 19:07

Strange bug. You can use the following override to fix it:

Ext.define('overrides.button.Button', {
    override: 'Ext.button.Button',
    
    setTooltip: function(tooltip, initial) {
        var me = this,
            targetEl = me.el;

        if (me.rendered) {
            if (!initial || !tooltip) {
                me.clearTip();
            }
 
            if (tooltip) {
                if (Ext.quickTipsActive && Ext.isObject(tooltip)) {
                    Ext.tip.QuickTipManager.register(Ext.apply({
                        target: targetEl.id
                    }, tooltip));
 
                    me.tooltip = tooltip;
                }
                else {
                    targetEl.dom.setAttribute(me.getTipAttr(), tooltip);
                }
 
                me.currentTooltipEl = targetEl;
            }
        }
        else {
            me.tooltip = tooltip;
        }
 
        return me;
    }
});

not sure if that resolves the core issue. it's because if you call enable() it still has the disabled state (it's enabled after setting the tooltip). With the disabled state the tooltipEl is not the object itself but nested and set to display block via css. However, since it is enabled afterwards the tooltip is display none. The code there is really questionnable. i currently simply call setTooltip again after enable(). Not the best approach either but it works as well. I kinda wanted to create this as a bug report since forums are kinda outdated/posts are getting deleted there. Thanks alot — gulty, Aug 04 '20 at 06:07
You are right, it is not the best solution and the code is questionable. But calling the setTooltip method on every enable/disable is not the best solution because you it goes against DRY principle. AFAIK the bug is in targetEl variable, it changes for some reason. — Arthur Rubens, Aug 04 '20 at 11:16

score 0 · Answer 2 · answered Aug 04 '20 at 09:29

0

You may try to add one line after enabling:

handler: function(btn) {
            this.down('#fooBtn').enable();
    ******this.down('#fooBtn').setTooltip("FooTip");*****
        },

Maybe a bad solution but less code is required.

answered Aug 04 '20 at 09:29

Muzaffer Galata

580
1
9
22

Tooltip not showing when enabling a button

2 Answers2