This CSS3 module is an easy and quick way to add nice looking tooltips to a page. Text that has a tooltip gets a dashed underline so that the user knows that there is extra content to be revealed.
In addition to underneath, tooltips can also be rendered on any side of the text just like this. You just give the tooltip a class of either north, east, south or west.
If a tooltip is shorter that the text the tooltip is associated with (the underlined text), then the tooltip will be exactly as wide as the text. However if the tooltip text is longer than the underlined text, the tooltip will be as long as it needs, but stay centered.
Normally the content of a tooltip is pulled from the data-tooltip attribute, but if you need to have styled text, you can put the contents of the tooltip in a <span> tag within a wrapper with the tooltip class. Like this text cannot can be formatted.
Of the tested browsers, there is full support for firefox (tested in 3.6 and 4b8) and full support in webkit. Opera 11.0 has a few issues. The least important is that the subtle gradient falls back to solid (translucent) color. However, due to a rendering error, some tooltips fail to hide completely after the user hovers off the element. It has not been tested in internet explorer, and don't expect it to work. A javascript solution for Internet explorer will be in version 2.5.