Add Tooltip to EXTJS Button
I am trying to add a tooltip to my button, I tried different ways but nothing happens when I click the mouse button under the button, this is part of my code when I tried to add this tooltip this is when I created a button named 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 tooltip
var tooltips = [{
target: 'guestButton',
html: 'A very simple tooltip'
}];
Ext.each(tooltips, function(config) {
Ext.create('Ext.tip.ToolTip', config);
});
Ext.QuickTips.init();
Thank!
+3
source to share
3 answers
Another way to add tooltips to rendering.
@chrisuae is right, but it didn't work for me either.
What worked when creating a tooltip for rendering an 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'
});
}
}
}
+5
source to share
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 be displayed. This is by design, but if you need you can override it with CSS:
.x-item-disabled, .x-item-disabled * {
pointer-events:all;
}
See the script here .
+3
source to share