CODEWITHSUNDEEP
javascriptextjstooltip
Ahmed
Ahmed

Reputation: 169

add a tooltip to an EXTJS Button

I am trying to add a tooltip to my button, I tried differents ways, but nothing happen when i put the mouse under the button, this is a part of my code when i tried to add this tool tip this when i created the button called guestButton 

 {
    xtype : 'button',
    id : 'guestButton',
    text : 'Guest User',
    handleMouseEvents: true,
    width : 80,
    x : 70,
    y : 150,
    formBind : false,                       
    handler : function() {
    this.up().LoginGuest();
    }

and here when i tried to create the tooltip 

    var tooltips = [{
            target: 'guestButton',
            html: 'A very simple tooltip'
        }];
Ext.each(tooltips, function(config) {
        Ext.create('Ext.tip.ToolTip', config);
    });  

Ext.QuickTips.init();

Thanks !

Upvotes: 4

Views: 6933

Answers (3)

AswathyPrasad
AswathyPrasad

Reputation: 361

Another way of adding tooltips at render.
@chrisuae is right , but it had not worked for me also.
What worked was creating tooltip on render of element :

   {
        xtype : 'textareafield', 
        grow : true,
        fieldLabel : 'E-Mail-Adressess'
        itemId : 'email',
        afterLabelTextTpl : required,
        allowBlank : false,
        listeners : {
            render: function(c) {
            Ext.create('Ext.tip.ToolTip', {
                target: c.getEl(),
                html: 'You can enter multiple emails here'
            });
           }    
        }
    }

Upvotes: 7

Ahmed
Ahmed

Reputation: 169

Thanks for your answers, I simply deleted this line handleMouseEvents: true, magically it works

Upvotes: 0

chrisuae
chrisuae

Reputation: 1112

You should be able to define a tooltip for a button in ExtJS using:

xtype : 'button',
id : 'guestButton',
text : 'Guest User',
tooltip: 'A very simple tooltip',

If your button is disabled, the tooltip will not show. This is by design, but if you need to, you can override it with some CSS:

.x-item-disabled, .x-item-disabled * {
    pointer-events:all;
}

See fiddle here.

Upvotes: 7

Related Questions