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

**Background**
_cftooltip_ uses “YUI”:https://developer.yahoo.com/yui/ (the Yahoo! UI Ajax library). CF actually uses the “YUI Tooltip”:https://developer.yahoo.com/yui/container/tooltip/ widget along with the “YUI Event Utility”:https://developer.yahoo.com/yui/examples/event/event-delegation.html to show/hide a tooltip on mouseover/mouseout.

**Initial Code**
I created a custom tag to encapsulate “our”:https://www.sportmatchmaker.com tooltip functionality. The ‘tag took just a few attributes (source, color, hideDelay). The issue was hideDelay WOULD NOT WORK! Here’s the _cftooltip_ code.

bq. <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. 🙂

bq. 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…

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

…copy and paste the following:

bq. 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.