The more I use the CF8 Ajax features, the more I like them.
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.
why i haven’t seen these attributes for img tag before?
xsrc & mce_src
That’s called a bug! The editor for the blog must automatically block the s r c argument and replace it.
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.
Works ok for me in IE 7.06. Thanks. Great tip!
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!
@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.
Great tip, but I’m having trouble getting this working.
Lisa, What is happened when you try it? Remember that this tip is from 2009 and applied to CF8. Things may have changed since – I never tried it with CF9.
I accept that it is an old concept can you update me the latest and updated concept for this same CFTOOL?