PDA

View Full Version : Need to change tip, use ToolTip or QuickTip, and how to do it.



glafrance
16 Aug 2012, 12:07 PM
I need to change a tooltip for a label at runtime throughout the life of the application while the user is using it.

First, for a label (not in a form, using it as a standalone label) should I use tooltip or quicktip?

I'll need to update the tooltip from time to time based on what is going on in the app.

This code allows me to set a tooltip for the label when I declare the label, but then how do I change it:


afterrender : function(obj) {
obj.tip = Ext.create('Ext.tip.ToolTip', {
target : obj.getEl().getAttribute("id"),
trackMouse : true,
renderTo : document.body,
html : 'This is a sample tooltip',
title : ''
});
}

Based on what I have read online, this should register a quicktip, which I can then unregister later to change the text. But it never shows up on mouse over:


Ext.tip.QuickTipManager.register({
target: Ext.ComponentManager.get('greetingMsg1'),
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 10000 // Hide after 10 seconds hover
});

vietits
17 Aug 2012, 5:53 PM
FYI


Ext.onReady(function(){
Ext.create('Ext.button.Button', {
text: 'Click to change tooltip on label',
renderTo: Ext.getBody(),
handler: function(){
label.tip.update('Tooltip content has been updated');
}
});
var label = Ext.create('Ext.form.Label', {
width: 200,
text: 'This is my label',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(label){
label.tip = Ext.create('Ext.tip.ToolTip', {
target: label.el,
trackMouse: true,
renderTo: Ext.getBody(),
title: 'My Tooltip',
html: 'This is original content of tooltip'
});
}
}
});
});

varunach
6 Nov 2012, 4:13 AM
This method is unsafe. If the component on which this tooltip is defined is destroyed, then the dom generated for the tooltip is not destroyed along with the component. We need to manage tooltip's destruction seperately.