View Full Version : How to use centralized location to store text for quick tooltips?

30 Jan 2008, 12:59 PM
Hi All,

I'm trying to use a single file that contains all the text for quick tooltips used throughout a site. Right now, I'm using inline tag to display quick tooltips like so:

<h4 ext:qtitle="Foo" ext:qtip="<p>Bar</p><br /><p>Foobar</p>">Upload a Foobar</h4>

Obviously, this is not very easy to maintain or scale for later.

I was wondering if I can have a file to keep all my tooltip text and have the correct text apply to the corresponding tooltip? And if so, how do I do that?


30 Jan 2008, 1:35 PM
I thought about implementing this on my site, however the content on mine is all dynamically built anyway, so I just did it a bit differently.

If I had implemented it, I would have extended the QuickTip class.
My DynamicTip class would have looked something like this:

This may or may not work...

Ext.QuickTip = Ext.extend(Ext.ToolTip, {

// this is a key-value map of the contents
contentMap: {
'foobar': '<p>Bar</p><br /><p>Foobar</p>'

getContent: function() {
// Use this function to get your content

// inherit docs
showAt : function(xy){
var t = this.activeTarget;
var text = t.text;
if(t.quickTipContent) {
text = this.getContent(t.quickTipContent);
this.measureWidth = false;
} else{
this.measureWidth = true;
this.setTitle(t.title || '');
this.autoHide = t.autoHide;
this.dismissDelay = t.dismissDelay || this.dismissDelay;
delete this.lastCls;
this.lastCls = t.cls;
if(t.align){ // TODO: this doesn't seem to work consistently
xy = this.el.getAlignToXY(t.el, t.align);
this.constrainPosition = false;
} else{
this.constrainPosition = true;
Ext.QuickTip.superclass.showAt.call(this, xy);

So then your element would look like this:

<h4 ext:qtitle="Foo" ext:qtip="foobar">Upload a Foobar</h4>

17 Jun 2008, 6:14 PM
I need to implement dynamically-generated tooltips which are stored in a database and would like to use some form of extending the QuickTips functionality. I am confident I can accurately write the "getContent" code which would query the database for the information, but am unsure of the purpose of the contentMap key-value data. I'm very new to Ext and am just not sure if the contentMap applies to my situation. Since I want to get information out of the database, do I even need the contentMap portion?

I've tried the above code, but nothing appears to happen when I hover my mouse over the DOM object which the "ext:qtip" attribute is assigned. Any thoughts? Can anyone confirm whether the above code works and I'm just confused?