ExtJS 4.1 - Tooltip within XTemplate

[ahdavis]

I have a treegrid "templatecolumn" that displays an image based on a condition in an XTemplate.

However, I also would like an html formatted tooltip displayed upon mouseover of the image. I've done this with Ext JS 3.x via ext:qtip metatdata attribute in a renderer, but haven't been able to figure out how to do this in Ext JS 4.1 using tpl and haven't found anything in my searching.

Here's what I have to display the image based on a record value:


var myTemplate = new Ext.XTemplate(
'<tpl if="p &gt; 0">',
'<img src="exclamation.gif" height="16" width="16"/>',
'</tpl>'
);

var schedTree = Ext.create('Ext.tree.Panel', {
...
columns:[
{ header:' ', dataIndex:'p', xtype:'templatecolumn', tpl:myTemplate }
]
}

Has anyone done this or have any suggestions? Is there a better way to do this? Thanks

[skirtle]

The QuickTip approach you describe sounds good to me. In ExtJS 4 the attributes start 'data-' rather than 'ext:' so it'd be data-qtip. See the docs here:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tip.QuickTipManager

[ahdavis]

Perfect, thank you! And thank you for the quick response. For completeness, here's the updated code:


Ext.tip.QuickTipManager.init();

var myTemplate = new Ext.XTemplate(
'<tpl if="p &gt; 0">',
'<img data-qtip="Test<br/>Message" src="exclamation.gif" height="16" width="16"/>',
'</tpl>'
);

var schedTree = Ext.create('Ext.tree.Panel', {
...
columns:[
{ header:' ', dataIndex:'p', xtype:'templatecolumn', tpl:myTemplate }
]
}