CFTOOLTIP tips

Mar 01, 2008
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 xsrc="myimage.jpg" mce_src="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.

 

Comments

Write your comment



(it will not be displayed)





About Michael Sprague

Mike is a Web developer and manager from Central New York, specializing in ColdFusion, CSS, JavaScript, and Ajax development. More ...

Categories

Monthly Archives

Favorite Bloggers

Web Resources