ColdFusion 8.0.1: cftooltip is broken!

cftooltip ignores attributes. Good thing is, I spent tonight figuring out what was up with it and have fixed it.

Background
cftooltip uses YUI (the Yahoo! UI Ajax library). CF actually uses the YUI Tooltip widget along with the YUI Event Utility to show/hide a tooltip on mouseover/mouseout.

Initial Code
I created a custom tag to encapsulate our tooltip functionality. The 'tag took just a few attributes (source, color, hideDelay). The issue was hideDelay WOULD NOT WORK! Here's the cftooltip code.

<cftooltip autodismissdelay="5000" showDelay="2000" hideDelay="#attributes.hideDelay#" sourcefortooltip="#attributes.source#">
<img src="/images/#attributes.color#.gif" width="16" height="16" />
</cftooltip>

No sweat, right? Wrong!

How does cftooltip work?
If you View Source on a page with a cftooltip, you'll see ColdFusion wraps your content in a span tag then assigns a listener. Well, granted...I'm using an img tag so maybe a div in the content of cftooltip wouldn't result in wrapping it with a span but I haven't tested that thought. Anyways...back to the post at hand. :-)

YAHOO.util.Event.addListener("cf_tooltip_1208158360141","mouseover",ColdFusion.Tooltip.getToolTip,{"_cf_url" : "/sometooltip.cfm","_cf_query" : "","context" : "cf_tooltip_1208158360141","hidedelay" : "15000","showdelay" : "2000","autodismissdelay" : "5000","preventoverlap" : "true"});

(**Update** Ignore extra spaces before the colon. MT is rendering it as a URL.)

That's the YUI code created for my tooltip which points to a file called /sometooltip.cfm and is supposed to show after 2 seconds, auto-hide after 5 seconds and if the user mouses off the image hide the tip 5 seconds later.

Sidebar: JS Coding
Ok, I'm a stickler for code and my first look at this, Friday, threw me slightly. Why in the world did the config object (last parameter inside the curley braces) have quotes around the property name and value? That seemed weird. Maybe it is so it works in an older browser version or something. Oh well...not sweat...it worked.

Back to "How it works..."
ColdFusion now has a ColdFusion javascript package named...(take a big guess)..._ColdFusion_. :-) I won't paste the cfajax.js file but it is located here: /CFIDE/scripts/ajax/package/cftooltip.js. There are two functions in this file. ColdFusion.Tooltip.getToolTip is the event handler for the addListener call (see above). The other one is ColdFusion.Tooltip.setToolTipOut which is called after a new listener is added to the tip for the mouseout event.

ColdFusion.Tooltip.getToolTip is where the problem resides.

The Fix
All of the code is legit and works. Don't be afraid by the variables with numbers for names. The 349 argument is the one to focus your attention on. If you do a _for...in loop you will see all of the parameters you passed into the config argument (see above). Everthing goes in perfectly fine but it seems YUI ignores all parameters. Why? Well, I haven't gone through the YUI code but I found a reason why it happens and here's how to take care of the problem.

Jump in your cftooltip.js and right before...

_34a=new YAHOO.widget.Tooltip(_349.context+"_cf_tooltip",_349);

...copy and paste the following:

if(_349.hidedelay != undefined) _349.hidedelay = Number(_349.hidedelay);
if(_349.autodismissdelay != undefined) _349.autodismissdelay = Number(_349.autodismissdelay);
if(_349.showdelay != undefined) _349.showdelay = Number(_349.showdelay);

Solution Explained
The problem is ColdFusion isn't casting the Number parameters as actual Number's. So either YUI validates those config params as Number's and if they aren't it ignores them as config params. It seems like the only valid reason but YUI has obfuscated their code and minimized it which I don't want to mess with.

So, to fix it we check to make sure the parameter of the 349 object exists then resets the value to the same value but casted as a _Number.

You can open your cftooltip.js and make the change above for your entire server (or that server instance if you're using a multiserver setup). If you use cfajaximport and set the scriptsrc to a local file you have BE SURE TO KNOW this is a change for ALL scripts on your site. So, you could get all CF Javascript files and put them in your site directory, set them with cfajaximport and only edit it for your site (how you'd probably have to do it with a shared site).

One other thing you could do is use <cfajaximport tags="tooltip" /> then directly use the YAHOO package but nix the call to ColdFusion.Tooltip.getToolTip and have the mouseover listener call your own custom function.

Anyways...I hope this helps because I looked all over and couldn't find 1 blog post about cftooltip not working. I had a business partner check and he found nothing either.

Adobe...please validate this fix and get it out there asap so the community is aware.