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.

Alliance

Note that the event is called 'afterrender', not 'rendered'. – Metamorphose

Answer 1

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.

Cuff

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? – Alliance

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 ;) – Cuff

It sounds like, unfortunately, the short version is "yes, this should be easier, and no, it isn't." :( – Alliance

so i have to add 8 lines of code for each tooltip on my components? – Cryptonym

@OliverWatkins Yep :/ Or override Ext.component with your customized version that includes support for tooltips. – Soup

Answer 2

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

Gearard

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

Munt

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

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

Clout

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.

Excretion

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

Hellenist

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

Aylmer

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

Scalf

Answer 9

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

Insistent

I am getting "Uncaught SyntaxError: Unexpected token '-'" error while using 'data-qtip' attribute – Unnamed

Answer 10

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

Arielariela

Please explain your answer – Lynwoodlynx