Using jQuery style a cftooltip span

It’s not hard to figure out how to style the box that pops up when using cftooltip.  It is controlled by the .yui-tt class.

/* Tool tip styling */
.yui-tt {
color: #444;
border: 2px solid #1C64D1;
background-color: #eee;
padding: 10px;

But how do you style the text that is triggering the tooltip?  cftooltip is going to generate a span around your text with the id of cf_tooltip_999999999 (where 999999999 is some random number).  I didn’t want to add another span to the mix to provide styling so I turned to jQuery for a simple, quick solution.

In the css file I added a class:

border-bottom:1px dashed #168FC0;

In the jQuery .ready() function I added this line:


The result is that the text which triggers all cftooltips is now controlled by the .terms class.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.