Pure CSS tooltips

Tooltips are the little yellow text boxes that pop up in some browsers when you hover over elements with title tags. Several developers have created their own custom, stylized tooltipsusing a combination of JavaScript and CSS. However, it is possible to create pure CSS tooltips by using CSS positioning techniques. This technique requires a modern, standardscomplian browser like Firefox to work properly. As such, it is not a technique you would add to your day-to-day arsenal. However, it does demonstrate the power of advanced CSS and gives you a hint of what will be possible when CSS is better supported.

As with all of the examples in this book, you need to start with well-structured and meaningful (X)HTML:

 <p>
   <a href="http://www.andybudd.com/" class="tooltip">
 Andy Budd<span> (This website rocks) </span></a>
 is a web developer based in Brighton England.
 </p>

I have given the link a class of tooltip to differentiate it from other links. Inside the link I have added the text I wish to display as the link text, followed by the tooltip text enclosed in a span. I have wrapped my tooltip text in brackets so that the sentence still makes sense with styles turned off.

The first thing you need to do is set the position property of the anchor to relative. This allows you to position the contents of the span absolutely, relative to the position of its parent anchor. You do not want the tooltip text to display initially, so you should set its display property to none:

 a.tooltip {
   position: relative;
 }
 a.tooltip span {
   display: none;
 }

When the anchor is hovered over, you want the contents of the span to appear. This is done by setting the display property of the span to block, but only when the link is hovered over. If you were to test the code now, hovering over the link would simply make the span text appear next to the link.

To position the contents of the span below and to the right of the anchor, you need to set the position property of the span to absolute and position it 1em from the top of the anchor and 2ems from the left.

 a.tooltip:hover span {
   display: block;
   position: absolute;
   top: 1em;
   left: 2em;
 }

Remember, an absolutely positioned element is positioned in relation to its nearest positioned ancestor, or failing that, the root element. In this example, we have positioned the anchor, so the span is positioned in relation to that.

And that’s the bulk of the technique. All that is left is to add some styling to make the span look more like a tooltip. You can do this by giving the span some padding, a border, and a background color:

 1 a.tooltip:hover span {
 2   display:block;
 3   position:absolute;
 4   top:1em;
 5   left:2em;
 6   padding: 0.2em 0.6em;
 7   border:1px solid #996633;
 8   background-color:#FFFF66;
 9   color:#000;
 }

Unfortunately, this technique does not work properly in IE 5.x on Windows as it stands. It would seem that IE has problems styling elements inside anchor links using a dynamic pseudo-class. However, there is a fix:

 a.tooltip:hover {
   font-size: 100%; /* Fixes bug in IE5.x/Win */
 }

Setting the font size as 100% on the hovered anchor somehow triggers Internet Explorer on Windows into correctly styling the contained span. Strange I know, but that’s IE for you. Sadly this technique breaks in Safari, and I have not managed to find a fix as I’ve done for Internet Explorer on Windows.