Web Trenches


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;
    border: 2px solid #EE2130;
    background-color: #FFF;
    padding: 10px;

 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.


9 Replies to “CFTOOLTIP tips”

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

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


  3. @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.

Leave a Reply

Your email address will not be published. Required fields are marked *