Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How should I add a tooltip to an ExtJS Component?

Tags:

tooltip

extjs

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.

like image 673
Coderer Avatar asked Apr 30 '11 00:04

Coderer


People also ask

What is tooltip in Extjs?

ToolTip is a Ext. tip. Tip implementation that handles the common case of displaying a tooltip when hovering over a certain element or elements on the page. It allows fine-grained control over the tooltip's alignment relative to the target element or mouse, and the timing of when it is automatically shown and hidden.

What is CLS Extjs?

cls: This is applied to the component's root element. Quoting from the docs: An optional extra CSS class that will be added to this component's Element. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.


1 Answers

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        });     }   }); 
like image 193
DSoa Avatar answered Sep 21 '22 20:09

DSoa