Ruby, Rails, Firefox, Anime, Mac
In: Web development22 Jan 2004
Pure CSS tooltips by SantaKlauss shows you how to display tooltips using purely CSS. The idea is not unlike Nice Titles, though the execution is very different – Nice Titles uses the DOM to extract the nicetitles, the tooltips use only CSS.
The smart part is when printing: the tooltips are “inlined” and bracketed appropriately so that they show up in the normal flow of the document when printing.
Still, I consider the execution to be semantically incorrect since the tooltip requires the anchor tag <a> to work – the text that is “tooltipped” is not an anchor. A better way would have been to use a standard <span> tag. Of course, this then breaks in IE because IE only supports the :hover pseudo-class on the <a> tag. Thanks to whatever:hover, however, this can easily be fixed. Also, there seems to be no need for the z-index fix as mentioned (tested on IE/Win 5, 5.5 and 6). The CSS is below:
Here’s an example.