Disabled EXT field tooltips not showing in FireFox

[AGregory]

Environment:
Firefox 17
Windows 7
IE 9
ExtJS 4.1.1

Hey everyone,
Let me start off by saying that I realize that this is a duplicate bug. I've seen similar bug reports throughout the forums, but none with a satisfying answer. The posts I've read through are all listed as can not reproduce or as fixed by Mozilla Bug 274626. Unfortunately, I'm certain that this bug has not been fixed as I am currently having problems with it.

The problem is that tooltips are not displayed for disabled fields in firefox. Many users before me have pointed out that Mozilla Bug 274626 addresses this issue and has been fixed. As far as I can tell, these bugs are related, but not the same.

Tooltips for simple HTML inputs are fixed by Mozilla Bug. For example, the following tooltip for a simple HTML input button works correctly when the button is disabled:

<button type="button" title = "test" disabled = "disabled" >Click Me!</button>

Although this bug fixes the problem with tooltips for disabled fields, it does not directly address the problem with extjs controls. In the following code, tooltips are displayed for all buttons when the webpage is loaded in chrome or IE9, but only the tooltip for the enabled buttons display when loaded in Firefox17

Ext.onReady(function(){

Ext.tip.QuickTipManager.init();

var form = Ext.create('Ext.form.Panel', {

renderTo: Ext.getBody(),

title: 'Simple Form',
bodyPadding: 5,
width: 350,

layout: 'anchor',
defaults: {
anchor: '100%'
},

// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],

// Reset and Submit buttons
buttons: [{
text: 'Reset',
tooltip :  'my Button Tooltip Text',
id : 'my-button ',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
tooltip:'Submit',
formBind: true,        
//disabled: true,
handler: function() {
Ext.getCmp('my-button ').disable();
}
}],
renderTo: Ext.getBody()
});


});​

The fix details of Mozilla Bug 274626 specifically mention that the title attribute of of the control is now correctly displayed when the control is disabled. However, the extjs controls do not have a title attribute.

This jsfiddle(http://jsfiddle.net/BSjqJ/12/) shows the bug in action. When loading the jsfiddle in chrome or IE9, the tooltips for all buttons should be displayed, regardless of the button being enabled or disabled. However, when loaded in Firefox17, the tooltip for the simple HTML clickme control is displayed, but the tooltip for the disabled ext button is not displayed.

I would greatly appreciate me if someone could let me know if there is a workaround for this or if I'm doing something wrong! Thank you for your help,

Adam

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[revolunet]

same here with Ext 4.1.1.1 and Firefox 19.

any update on this ?

[AGregory]

I'm not sure why this problem can't be reproduced. The linked JsFiddle shows that the tooltip field for ext buttons doesn't display when the button is disabled.

Instead of using the tooltip field for the button control, try creating a separate tooltip object and linking this object to the button.

var tip = Ext.create('Ext.tip.ToolTip', {
    target: 'ButtonID',
    html: 'TooltipText'
    });

see the Submit button in this example: http://jsfiddle.net/BSjqJ/13/

[revolunet]

Thanks AGregory for the feedback

Based on your example, theres a simple workaround :

instead of just "tooltip:'blabla'" you need to add :

id: 'btnID',
tooltip: {
    target: 'btnID',
    text: 'blablabla'
}