PDA

View Full Version : Extending the QuickTips...



jheid
9 May 2007, 10:12 PM
Hi.

I haven't found a way to extend the functionality of the QuickTips. I want to use it for dynamic tooltips in grid but those tooltips have to be generated by request (via AJAX call). For that it would be a nice feature if you can pass a function to the "ext:qtip" attribute so that this function is called when the tooltip is rendered.

At the moment I'm thinking about how to pass a function using the renderer function:


function render (value, p, record) {
p.attr = 'ext:qtip="return dynamic()"';
return value;
}


Perhaps the keyword "return" can decide wether the tooltip lib should use it as a string or a function call...

Any ideas? Wouldn't it be a nice feature for 1.1?


JOERN

tryanDLS
10 May 2007, 8:34 AM
That would probably be a bad idea from a usability standpoint. In a lot of cases by the time the user mouse's over something and an ajax request is made and the result processed, the user will have moved on. A better idea would probably be to load the tip text dynamically into an array during initialization and use register to add them to elements, or provide your lookup functionality at the time you build the control so you can pass the tip in the config.

jheid
10 May 2007, 9:58 AM
That would probably be a bad idea from a usability standpoint. In a lot of cases by the time the user mouse's over something and an ajax request is made and the result processed, the user will have moved on. A better idea would probably be to load the tip text dynamically into an array during initialization and use register to add them to elements, or provide your lookup functionality at the time you build the control so you can pass the tip in the config.

No. As AJAX is asynchron there won't be a huge problem when the user has left the field. Secondly, you can increase the delay value to avoid too many calls.

Let me explain you two scenarios where you will need this:

1. Using tooltips to deliver information for a form field. In one of my applications those descriptions are up to 5 lines and there are up to 100 tooltips on one side. This means heavy loading time using a modem or isdn.

2. In my table (about 20 columns and 30 rows) some cell tooltips should be delivered from another database table row (via AJAX call). The tooltip will display up to 10 lines including a comment field. When using a static approach this will slow down the entire application.

JOERN

haibijon
10 May 2007, 11:59 AM
No. As AJAX is asynchron there won't be a huge problem when the user has left the field. Secondly, you can increase the delay value to avoid too many calls.

Let me explain you two scenarios where you will need this:

1. Using tooltips to deliver information for a form field. In one of my applications those descriptions are up to 5 lines and there are up to 100 tooltips on one side. This means heavy loading time using a modem or isdn.

2. In my table (about 20 columns and 30 rows) some cell tooltips should be delivered from another database table row (via AJAX call). The tooltip will display up to 10 lines including a comment field. When using a static approach this will slow down the entire application.

JOERN

Hey jheid, I agree with tryanDLS on this one. Don't forget that browsers have maximum simultaneous connections per host (IE only allows 2 connections at a time to a host), meaning that even if you fire async requests for each field/row on a delay, you may end up with bottlenecks if a user tries to access too many rows in succession (I've experienced this with TVGuide.com's listings which uses your proposed delay/request model).

jheid
10 May 2007, 12:02 PM
If somebody is interested: As the QuickTips aren't really extensible I added the line




<script type="text/javascript" src="QuickTips.js"/>


and changed the lines




el.dom.style.width = tm.maxWidth+'px';
//tipBody.dom.style.width = '';
tipBodyText.update(o.text);


to




el.dom.style.width = tm.maxWidth+'px';
//tipBody.dom.style.width = '';
var ttText = o.text;
if (ttText.indexOf ('return ') == 0)
ttText = eval (ttText.substring ('return '.length, ttText.length));
tipBodyText.update(ttText);


so you can write your own method to deliver the tooltext text:



<div ext:qtip="return getMyTooltip(4711)">

haibijon
10 May 2007, 12:08 PM
jheid, placing any javascript within an HTML or XHTML attribute is begging for problems. Javascript can contain a slew of characters that are not valid in HTML and XHTML documents and can cause problems with the browser rendering and doctype validation of the page.

I would really suggest finding a better way of mapping your tooltips, inline javascript is rarely a good idea.

jheid
10 May 2007, 12:09 PM
Hey jheid, I agree with tryanDLS on this one. Don't forget that browsers have maximum simultaneous connections per host (IE only allows 2 connections at a time to a host), meaning that even if you fire async requests for each field/row on a delay, you may end up with bottlenecks if a user tries to access too many rows in succession (I've experienced this with TVGuide.com's listings which uses your proposed delay/request model).

It just depends on the scenario. Perhaps the thing I'm thinking about wouldn't be called "QuickTips" but "InfoTips" or a popup window. The thing is that I think it might be a nice feature if those QuickTips can be a little bit extensible so that you can do other "slower" things with it... If nobody needs this, okay.

jheid
10 May 2007, 12:14 PM
jheid, placing any javascript within an HTML or XHTML attribute is begging for problems. Javascript can contain a slew of characters that are not valid in HTML and XHTML documents and can cause problems with the browser rendering and doctype validation of the page.

I would really suggest finding a better way of mapping your tooltips, inline javascript is rarely a good idea.

Yes, I agree. It's just a quick and dirty solution as I actually wanted to make a feature request.

isaacfinnegan
18 Jun 2007, 10:11 AM
I also am trying to extend the quicktips and am having trouble. I was trying to write a new class that extends it, but I'm in over my head. The idea was to override show or afterShow and have it update the tipBodyText

Nikivich
19 Jun 2007, 12:55 AM
Actually, the thing you want to do would be better (from a software design perspective)
done like this:


var qtipsMap = {
test: "This is some qtip text",
test2: "This is some other text"
}

Ext.extend(Ext.QuickTips,
{getToolTipTextByid: function(id){
//use an array/ajax request/whatever you like that returns the actual text
return qtipsMap[id] || 'Undefined qtip id' + id;
} });

Then override your Qtips implementation so that instead of settings th text directly, it
calls this.getToolTipTextById()

When constructing a qtip, you should then pass qtip:test
instead of the text, a secondary advantage of doing it this way, is Internationalization of your tips....

arnair
2 Jul 2007, 10:40 PM
jheid,

We had a similar need as well, and I took the following approach (super ugly, but atleast you won't have to touch the QuickTip code):



Ext.onReady( function() {
var tipBodyText = Ext.get( Ext.DomQuery.selectNode('div.x-tip-bd-inner') );
tipBodyText.update = function( html ) {
if( html.endsWith("()") ) html = eval(html);
return Ext.Element.prototype.update.apply( tipBodyText, arguments );
}
} );


The above will look for any qtip text ending in "()", eval and invoke it as a function, then show the result as the quicktip text.

We're using this to show additional information if a user hovers over a tree node. As the system runs, we keep updating the node data that will eventually be shown in the tooltips so it is necessary for us to build the tooltip html dynamically everytime the source data is marked as "stale" (and we don't want to build the tooltip text unnecessarily).

Ext folks: is there a chance that Ext.QuickTips.show() will be made more easily overridable, or atleast the singleton tooltip element be made accessible via say a getTooltipEl() call or similar?

Thanks,
Arun

rlfitch
14 Jul 2007, 10:22 AM
Arun,

Would you mind providing some add'l code for a newbie. How are you calling the tipBodyText.update function?

Thanks,
Ransom Fitch

arnair
15 Jul 2007, 8:39 AM
Arun,

Would you mind providing some add'l code for a newbie. How are you calling the tipBodyText.update function?

Thanks,
Ransom Fitch

As I mentioned in my post, any qtip text ending in "()" will automatically cause my code to execute.

rlfitch
18 Jul 2007, 7:19 PM
As I mentioned in my post, any qtip text ending in "()" will automatically cause my code to execute.

Yes, I saw that you mentioned that in your other post. Still, I am looking for a bit of code that might answer my question.

Thanks,
Ransom Fitch