PDA

View Full Version : Tooltips in Grids



EricBrian
26 Jun 2007, 9:00 AM
Hello,

does anybody have an example to offer that shows how to use tooltips with a grid?

That is, I want to show a nice tool tip when somebody hovers over the title bar of a grid.... something like the image that I've attached. The mockup attached is only supposed to be a rough display of what I am talking about. It does not have to look like that at all.

Thanks
Eric

Wolfgang
29 Jun 2007, 10:47 AM
Find attached sample code that shows tooltips for the data (not for the header).
It makes use of a custom renderer:



function renClid2 (value, p, record) {
p.attr = 'ext:qtip ="' + record.data['context'] +'"';
return String.format('<b>{0}</b><br />(using:{1})', value, record.data['context']);
}



and here a renderer that uses images for the cells and also custom tooltips:


// render direction using images depending on in/out
function renDirection (direction, c) {
var img, atext;
direction = direction.toUpperCase()
switch (direction) {
case "INCOMING": img = 'incoming.gif'; c.attr = 'ext:qtip ="Incoming Call"'; atext = "Incoming Call"; break;
case "OUTGOING": img = 'outgoing.gif'; c.attr = 'ext:qtip ="Outgoing Call"'; atext = "Outcoming Call"; break;
case "BRIDGED": img = 'arrow_refresh.png'; c.attr = 'ext:qtip ="Bridged Call"'; atext = "Bridged Call"; break;
}

return '<img src="' + img + '" border="0" alt="' + atext + '">';
};


Btw.: I think the idea of this section is to post examples, not to ask for them ;)
So if you have questions about tooltips, i suggest to put these questions in the help forum.

Regards

Wolfgang