View Full Version : "Advanced" Tooltip in XTemplate

27 Dec 2010, 1:59 AM
I want to display an "advanced" Tooltip - as shown in the examples - in a DataGrid/DataView. Unfortunately I don't know how to manage that...

Using the qtip Attribute works, but I want to do more in my tooltip than just show data... show an anchor, select the position of the tip, trigger Actions and so on.
Removing the qtip attribute and replacing in with the commented code does - exactly - nothing.

So my question is: how can I show a rich-content-tooltip with anchor:bottom within a template?

Thanks in advance for any advice!
Regards, Alina

var qtiptpl = new Ext.XTemplate(
'<tpl for=".">'
,'<div><i>{label}:</i> {content}</div>'

var tip = qtiptpl.apply([{label:"ID",content:values.id},{label:"MediaType",content:values.mediaType},{label:"FileExtension",content:values.fileExtension}]);

if (!Ext.isEmpty(miscButtonInfo)){
var id = "misc_" + values.id;
// miscButton some html inserted into the template
miscButton = '<span class="infocircle" id="' + id + '" style="background-color:silver" qtitle="my title" qtip="' + tip + '" hide="false">' +
'<img src="misc.png" alt="misc" />' +

//new Ext.ToolTip({
// target: Ext.select("#" + id),
// html: 'A very simple tooltip'

27 Dec 2010, 2:40 AM
You shouldn't be using QuickTips for this.

You should create a single Tooltip instance with a target set to the tpl render location and delegate:'div' (maybe add an extra class to the div in your tpl to make this selector more specific?).

Next, you probably want to write a 'beforeshow' listener for the tooltip to update the tip content based on the current element.

27 Dec 2010, 4:27 AM
Thank you Condor, you made my day!
Simple but... you have to know it... :)

Thx Alina