How should I add a tooltip to an ExtJS Component? - extjs

Question

I'm making an ExtJS Component, and I want it to use a QuickTips tooltip. If I make an element using DomHelper, I can set a tooltip, no sweat. If, however, I make a Component, like
new BoxComponent({
qtip: "This is a tip"
});
nothing happens. I've also tried naming the property "tooltip", but no luck. Is there a right way to do this? The hack I have in place now that works is
new BoxComponent({
qtip: "This is a tip",
listeners: {
rendered: function(c){
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
}
}
});
I feel like that can't be right. I guess I could just extend Component to do that automatically, but it seems like a common enough case that I should be able to do it without poking under the hood like this.

Answer 1

In ExtJS 4.2.1, I am able to add a tip to a checkbox this way:
new Ext.form.field.Checkbox({
...
tip: 'This is a tip',
listeners: {
render: function(c) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
html: c.tip
});
}
});

Answer 2

I think you're doing it absolutely right. I really don't see the need for QuickTips in arbitrary Components, particularly in Containers, since that might lead to multiple tooltips within the same Component.

Answer 3

It should work :
new BoxComponent({
tooltip: new Ext.ToolTip({
title: 'Example Tooltip title',
text: 'Example Tooltip text'
}),
listeners: {
rendered: function(c){
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
}
}
});

Answer 4

Hrm. I took a look at how Ext.Button does it, with passing tooltip to the configuration calling setTooltip under the hood.
Untested, but I think your best bet is something like:
Ext.Component.prototype._onRender = Ext.Component.prototype.onRender;
Ext.override(Ext.Component, {
onRender: Ext.Component.prototype._onRender.createSequence(function(ct, position) {
// setTooltip code adapted from Ext.Button, looking at tooltip property
});
});

Answer 5

I think this is the best way in Extjs 4:
you should add an afterrender listener, then when yor componenten is already created you can add the tooltip, this way:
listeners : {
afterrender : function(obj) {
if (this.max != null && this.ave != null && this.min != null) {
obj.tip = Ext.create('Ext.tip.ToolTip', {
target : obj.getEl().getAttribute("id"),
trackMouse : true,
renderTo : document.body,
html : this.htmlTip,
title : this.title
});
}
}
}
I hope it helps.

Answer 6

Simplest way is to set 'data-qtip' attribute on the main element of the component:
{
xtype: 'box',
autoEl: {
'data-qtip': "Tooltip text"
}
}
Make sure to enable qtips on application startup:
Ext.tip.QuickTipManager.init();

Answer 7

I always use this way in ExtJs 3
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c,
text: 'Enter \'-1\' for a 1 time only'
});
}
}

Answer 8

This way works perfect! Try it! (Extjs 4.2)
var boxComponent = Ext.create('Ext.Component', {
id: 'id111',
html: '<img src="js/extjs/resources/cb-theme/images/shared/icon-question.png">',
width: 20,
height: 20,
margin: '0 0 0 10'
});
Ext.tip.QuickTipManager.init();
Ext.tip.QuickTipManager.register({
target: 'id111',
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 10000 // Hide after 10 seconds hover
});

Answer 9

{
xtype: 'checkbox',
fieldLabel: 'Test Label',
name: 'data_field',
autoEl: {
tag: 'div',
'data-qtip': 'This is a tip'
}
}

Answer 10

{
xtype: 'checkbox',
tip: 'This is a tip',
listeners: {
render: function(c) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
html: c.tip
});
}
}
}