Tooltips, those little boxes that show up when you hover over a block of text, are one of my favorite types of GUI elements- they’ve become so common, showing up on websites, blogs, and software applications, that when I mouseover something I don’t understand and a tooltip doesn’t appear, I get frustrated.
Adding tooltips to your links are simple enough- use the title tag. Here’s an example of a link with a title tag tooltip- you should see the words “Awesome Web Development Blog” when you hover over this link: Devlounge.
Now that’s fine, but what if you want to pretty up those tooltips? Here are some ways you can do that:
Balloons & Boxes by Sheldon McKay This one, based on balloon.js, is simple enough and is a quick way to make your tooltips stand out. It requires five files, has great online documentation, and allows you to use your own images.
dhtmlgoodies.com’s tooltips I highly recommend looking at their Tooltip for forms script. Forms are usually where you’re looking for interaction from your reader, and offering them tooltips to describe various parts of the form is- well, it’s good form.
Good Looking Tooltips I like this one because it’s by far the easiest to implement among the javascript versions. Uses one javascript file, with css classes to add to your existing stylesheet. It looks great, too.
Pure CSS Tooltips Of course going purely CSS is a wonderful idea- no need to include another pesky js file. You style it using CSS. For slightly more fun, also look at CSS Bubble Tooltips.
Finally, if you’re serious about your tooltips, have a look at Prototip 2, which costs three euros for a single domain, or fifteen euros for unlimited domains. These prices are for non-commercial use- commercial licenses are considerably higher. For your money, you can automatically generate a variety of tooltip styles for your site, some very pretty ones, and others still with more functions than you can shake a stick at. I do think, though, that adding images to your tooltips, as well as very very long tooltips, can be overkill.
Do you respond better to prettier tooltips? Do you use them regularly in your posts?
