TooltipsThis is an example of a tooltip are little boxes of text that pop up when you hover over a link. They can rather easily be done with pure CSS. Today I had to do it with inline links that spit out tooltips with further info. I took me several hours of fun, searching the net, gathering info on bugs and inconsistent implementation of CSS, to find a solution that reliably works on Mac OS and Windows in Internet Explorer, Firefox and Safari. I don‘t claim to be an CSS expert, but let me share…

Updated on 10 Nov 2006: Now works in Opera.

To start it all, build some structure:

Today I met a
    <a href="#" class="tooltipparent">
        tooltip
        <span class="tooltip">Her name was Linda</span>
    </a>
and instantly fell in love with her.

The parent text (that will be showing the tooltip on rollover) is tagged with a normal anchor <a> (with a href-destination or just a “#”) with class="tooltipparent". Within this tag there is also a span with class="tooltip" that contains the text for the tooltip. Now all we have to do with the CSS is: Make the <span> invisible when within a normal <a> and show it if it is within a <a:hover>:

a.tooltipparent span.tooltip {
    visibility: hidden;
}
a.tooltipparent:hover span.tooltip {
    visibility: visible;
}

We want the tooltip to appear directly under the parent link, in front of the normal text. We take it out of the normal flow with position:absolute; top: 28px;. For the parent we set position:relative. This way the position of the tooltip is calculated relative to the parent.

This technique is already covered in several places (psacake, lixlpixel and in detail at Community MX). But while I tried to make it work across browsers, I found out that there are three cliffs to sail around:

1. Clipping Bug in Safari

Even in the current version 2.0.4 this method leads to unmotivated clippings. I could not make out a rule when these clippings occur, but it seems to be a documented bug. Fortunately this only happens with tooltip parents that are set to display:inline. Switching to display:inline-block solves the problem, but you need to use vertical-align:bottom to make the tooltip parent realign with the rest of the text line. I found the clue to this in a MacNN forum post.

2. Internet Explorer bug if no change to a:hover

From lixlpixel: “There is a bug in IE that requires you to make some change on hover in order for it to work properly.” If there is no change to the CSS of a:hover the tooltip will not show up. Just include any alteration to a.tooltipparent:hover. I prefer to have visual feedback on the tooltip parent anyways.

3. Internet Explorer bug with display:none/block

I experienced some weird behaviour of IE when I used display:none and display:block instead of the visibility attribute to hide and show the tooltip: The text of the tooltip was correctly hidden and shown, but the background stuck on screen after the first rollover and was not hidden on rollout. That is why I chose to use visibility:hidden and visibility:visible for this.

4. Positioning breaks in Opera

M john told me that this tooltip technique does not work in Opera. After some tinkering I discovered the reason is Opera