Results 1 to 2 of 2

Thread: 7.1: Button Tooltips not showing after enabling from disabled state

  1. #1

    Default 7.1: Button Tooltips not showing after enabling from disabled state

    In Ext-JS 7.1 (7.1.0.15), once an Ext.button.Button is disabled, the tooltip is no longer displayed once the button is enabled. This is the same whether the button is initially disabled (e.g., disabled: true), or if it is set later (e.g., setDisabled(true) ) Here's a fiddle to show the problem:
    If you hover over the '>' button on the toolbar, you'll see the 'Next Page' tooltip. But, if you click my "Toggle 'Next' button" button, which toggles the '>' button's enabled/disabled state, the tooltip goes away. Clicking the button again disables the '>' button, and the tooltip is back.

    Likewise, the refresh button is enabled by default, and shows the 'Refresh' tooltip. If you click my "Toggle 'Refresh' button" button, the Refresh button is disabled, and the tooltip is still displayed. However, re-enabling the 'Refresh' button shows the tooltip is no longer displayed. Toggling again disabled the 'Refresh' button, and the tooltip is displayed once again.

  2. #2
    Sencha Premium User abutnar's Avatar
    Join Date
    Dec 2015
    Location
    Cluj-Napoca, Romania
    Posts
    12

    Default

    In 7.1 Sencha fixed a 5 year old bug: EXTJS-18529 - Tooltips not working when button is disabled (https://docs.sencha.com/extjs/7.1.0/...ase_notes.html)

    This fix seems to have introduced the bug you reported that I also have encountered.
    I managed to isolate the issue to the setToolTip() function and I created an override that fixes it.

    Note: I do not understand what the dev wanted to achieve with that if statement. I do not see why would you want to switch the targetEl from the button itself to the tooltip element depending on button disabled state.

    Code:
    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();  
                }   
                
               // Comented this if statement
    
    
                // if (me.disabled) {   
                //     targetEl = me.tooltipEl; 
                // }    
        
                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;  
        },
    
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •