PDA

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



colinexl
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?


Thanks,
Colin

para
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;
if(t){
var text = t.text;
if(t.quickTipContent) {
text = this.getContent(t.quickTipContent);
}
if(!this.rendered){
this.render(Ext.getBody());
}
if(t.width){
this.setWidth(t.width);
this.measureWidth = false;
} else{
this.measureWidth = true;
}
this.setTitle(t.title || '');
this.body.update(text);
this.autoHide = t.autoHide;
this.dismissDelay = t.dismissDelay || this.dismissDelay;
if(this.lastCls){
this.el.removeClass(this.lastCls);
delete this.lastCls;
}
if(t.cls){
this.el.addClass(t.cls);
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>

ShaneB
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?

Shane.