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

Best Firefox Add-ons for web developers?

I’m looking for the best Firefox Add-ons for web developers.

A few things you should know about me:

  1. I like lists.  A lot.  I make them all the time for everything.
  2. I hate repetition and drudgery in my work.  If there is a (legitimate) shortcut I want to know about it.
  3. I’m a ColdFusion web developer who dabbles in jQuery.
  4. I dig Firefox for helping me with all of the above.

Now this is where you come in… What are your favorite/most useful Firefox Ad-ins that help you get your work done on a daily basis?

Here are mine (alpha order):

  • ColorZilla – Eyedropper/colorpicker
  • Dummy Lipsum – Generate “Lorem Ipsum” dummy text.
  • Evernote Web Clipper – For selecting text to evernote
  • Fast Dial – Visual bookmark homepage
  • Firebug – My main usage is debugging AJAX
  • FIreGestures – Executes commands with mouse gestures
  • FireShot – Screen shot utility
  • iMacros – Awesome utility for building test cases or automating repetitious tasks
  • TinyURL Generator – Generates TinyURLs
  • Web Developer – Adds tons of tools (too numerous to list)
  • Xmarks – Sync your bookmarks across multiple machines (and platforms!)

Thanks, I look forward to hearing from you.