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.

Answer 1

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

Answer 2

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 3

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 4

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 5

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 6

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.