ColdFusion 8: A "Tip" For You...

Ok, the title is a dumb one, but one of the nice new tags in ColdFusion 8 is the cftooltip tag. As you can imagine, it creates a DHTML based tooltip. It is rather easy to use as well: <cftooltip tooltip="The following table displays sales for products over the past year."> <table> <tr> <th>Product</th> <th>Sales</th> </tr> <tr> <td>Apples</td> <td>3,313</td> </tr> <tr> <td>Bananas</td> <td>5,491</td> </tr> <tr> <td>Cherries</td> <td>1,232</td> </tr> </table> </cftooltip>

Whenever someone hovers their mouse over the table, the text explaining the data will pop up. The tag has a few optional arguments for how quickly the tool tip should appear or go away, but the other main attribute you can use is sourcefortooltip. Here is a simple example:

<cfloop index="x" from="1" to="5"> <cftooltip sourcefortooltip="test3.cfm?id=#x#"> <cfoutput> <p> This is the #x# paragraph. </p> </cfoutput> </cftooltip> </cfloop>

Now when the user mouses over the paragraph, ColdFusion will do an AJAX request to test3.cfm?id=X, where X is a value from 1 to 5. You can return any HTML you would like, including images. Here is the simple file I used:

<cfparam name="url.id" default=""> <cfoutput> <b>Tip #url.id#</b>: This is an example of a dynamic tooltip. #timeFormat(now(),"H:mm:ss")# </cfoutput>

Why the time? I was testing. ColdFusion caches the result of the tooltip text, so even if you mouse away and return back over the item, the seconds value is not going to change. This is probably a good thing performance wise, but something you don’t want to forget.

Personally, I can see this being very useful for forms. I can imagine using this quite a bit for buttons, links, etc, to make it clear what each item does. Since I have the ability to slow down the appearance of the tooltip, I can set this to a good value such as not to bug people who actually know what they are doing.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments