How should I add a tooltip to an ExtJS Component?

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.

Note that the event is called 'afterrender', not 'rendered'. — Rijk, Jan 06 '12 at 15:46

score 21 · Answer 1 · answered Jul 15 '13 at 19:28

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 
      });
    }
  });

score 9 · Accepted Answer · answered Apr 30 '11 at 09:11

9

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.

answered Apr 30 '11 at 09:11

user123444555621

148,182
27
114
126

1

OK, I'm new at all this. I *just barely* understand the difference between "components" and "elements" (a Component *has an* Element, right?). What I want to do is, make a *thing on my page* that has a) a tooltip, and b) a click handler. I'd like to be able to do that with about two lines of code -- am I unreasonable? – Coderer May 02 '11 at 21:12
1

A Component is what other frameworks call a Widget, and consists of nested Elements (which are basically wrappers for DOM nodes). If you need Components with tooltips frequently, you may want to consider creating a plugin, so you could quite simply use `plugins: [ComponentQickTipPlugin], qtip: "This is a tip"` - that's two lines ;) – user123444555621 May 02 '11 at 22:19
2

It sounds like, unfortunately, the short version is "yes, this should be easier, and no, it isn't." :( – Coderer May 03 '11 at 21:48
4

so i have to add 8 lines of code for each tooltip on my components? – Oliver Watkins Dec 08 '14 at 12:45
@OliverWatkins Yep :/ Or override Ext.component with your customized version that includes support for tooltips. – FuriousFolder Jan 22 '16 at 18:24

score 3 · Answer 3 · answered May 02 '11 at 10:42

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
      }
    }
});

answered May 02 '11 at 10:42

Deniz

793
11
20

This helped me in AEM. `CQ.Ext.QuickTips.init(); new CQ.Ext.form.Checkbox({ title:'xyz', text:'abc', listeners: { render: function(c) { CQ.Ext.QuickTips.register({ target: c, title: c.title, text: c.text, width: 200, dismissDelay: 10000 }); } } }); ` – Dileepa Apr 14 '16 at 09:10

score 2 · Answer 4 · answered Aug 16 '17 at 12:15

2

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();

answered Aug 16 '17 at 12:15

TheZver

1,502
2
14
19

score 2 · Answer 5 · answered Apr 30 '11 at 03:11

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
  });
});

score 2 · Answer 6 · answered Mar 05 '12 at 15:08

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.

score 1 · Answer 7 · answered Jul 03 '13 at 11:24

1

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'
        });
    }
}

answered Jul 03 '13 at 11:24

Mohammad AlQanneh

3,227
1
16
14

score 0 · Answer 8 · answered Nov 06 '14 at 11:39

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
});

score 0 · Answer 9 · answered Feb 22 '22 at 08:40

0

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

answered Feb 22 '22 at 08:40

VasyaM

11
1

I am getting "Uncaught SyntaxError: Unexpected token '-'" error while using 'data-qtip' attribute – Sashikanta Feb 22 '23 at 13:45

score -1 · Answer 10 · answered Jun 10 '14 at 20:43

-1

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

answered Jun 10 '14 at 20:43

Filipizaum

1
1

4

Please explain your answer – Gwenc37 Jun 10 '14 at 21:03

How should I add a tooltip to an ExtJS Component?

10 Answers10

Linked