Extjs4 display tooltip for disabled button

Question

when i disable the button it's tooltip also disables. Is there a way to show the tooltip even the button is disabled.

//create my button
       var myButton = Ext.create('Ext.Button', {
            tooltip :  'my Button Tooltip Text',
            id : 'my-button ',
            iconCls : 'star-icon',
            handler: Ext.Function.pass(_rmp.mediaManager.myButtonFunction, this)
        });

 //disable my button
    Ext.getCmp('my-button').disable();

EDIT: It is not working as expected on firefox(I am using version 8.0.1) for other browsers(chrome,safari, opera) tooltip works as expected.

Answer 1

@jeewiya

By default, ExtJS framework shows the tooltip on the disabled button. Here is what I had on my Reset button:

{
        text: 'Reset',
        tooltip :  'my Button Tooltip Text',
            id : 'my-button ',
        handler: function() {
            this.up('form').getForm().reset();
        }
}

And, the following image shows that the tip appears even after the Reset button was disabled

In case, you want to try out my sample, here is the complete code that I have tested with ExtJS 4.0.7 and is working as expected:

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',
        formBind: true, 
        disabled: true,
        handler: function() {
            Ext.getCmp('my-button ').disable();
        }
    }],
    renderTo: Ext.getBody()
});



});