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;
font-size:110%;
border: 2px solid #1C64D1;
background-color: #eee;
padding: 10px;
width:250px;
cursor:help;
}
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:
.terms{
color:#168FC0;
border-bottom:1px dashed #168FC0;
text-decoration:none;
margin-bottom:10px;
font-weight:bold;
}
In the jQuery .ready() function I added this line:
$("[id^=cf_tooltip_]").addClass("terms");
The result is that the text which triggers all cftooltips is now controlled by the .terms class.