CFTOOLTIP is a fairly simple tag, but you can do some fairly powerful things with it.
TIP #1 - Styling
You can style a cftooltip to look like a pop-up window or Netflix-style pop-up. Here's a small clip to put in your page and experiment with.
<style type="text/css">
.yui-tt {
color: #444;
font-size:110%;
border: 2px solid #EE2130;
background-color: #FFF;
padding: 10px;
width:250px;
}
</style>
TIP #2 - Ajax it!
Instead of using the tooltip="my text" method of displaying the tooltip, use the sourcefortooltip="" attribute. With this, you can push in dynamic tooltips with more complex content, such as images and formatting. Like this...
<cftooltip sourcefortooltip="myajaxcontentfile.cfm?action=getTooltip&id=1">
<img s r c="myimage.jpg" /></cftooltip>
Then, in myajaxcontentfile.cfm, you can have it push back images, or more complex layouts and information. This could be drawn from a database, or just as HTML in the file.
Nov 26, 2008 at 12:14 PM why i haven't seen these attributes for img tag before?
xsrc & mce_src
Nov 26, 2008 at 1:39 PM That's called a bug! The editor for the blog must automatically block the s r c argument and replace it.
Jan 13, 2009 at 7:30 PM Hi Michael,
I've been playing with this for the past couple hours and looks like the styling only works with FF. Does not work in IE7 or Chrome.
May 6, 2009 at 9:06 AM Works ok for me in IE 7.06. Thanks. Great tip!
May 21, 2009 at 6:38 PM Is there anyway to affect the possition on the page (relative or absolute)? It is rendering right and down from the mouse, and I'm trying to tooltip something along the right column of the page.
Thanks!
May 26, 2009 at 10:19 AM @Chris - I couldn't find a way to adjust the position of the tooltip using CSS. I'm sure it could be done if you hack the Javascript, but I wouldn't recommend that. You'd be better off custom-programming it.