Tuesday, December 2, 2008

How to modify Ext tooltips dynamically

I have a requirement to dynamically change tool-tips as content gets refreshed and modified. There were a couple of suggestions in the forums, but the following works great for me:
var mydom = Ext.get('mydomelement');       // get element
var tip = Ext.getCmp(mydom.dom.id + '_tip'); //get element's tooltip

if ( tip ) {// tool tip already exists, so modify

tip.title = 'new title';
tip.html = 'new text';
}

else { // tip does not exist. Create it with unique id.

new Ext.ToolTip({
target: mydom.dom.id,
id: mydom.dom.id + '_tip',
title: 'title here', html: 'original text'
});
}
I am giving every tooltip a unique id, based on the id of the dom element it decorates.