Elliot Swan

Pure CSS Tooltips | An experiment with the :after pseudo-element 12:36 pm

You’ve probably seen those stylish JavaScript tooltips, such as the ones on ESPN. After reading the W3 CSS2 docs I began to wonder if something similar could be done using the :after pseudo-element and the content property. I found out that yes, it can be done, but (unfortunately) it does have it’s limitations.

The XHTML

First we have to specify our tooltip in our XHTML. The browser automatically makes tooltips from the title attribute, but they tend to look pretty boring. So I made my own attribute:

<a href="somewhere.php" tooltip="This is tooltip text">The link</a>

And there lies the first drawback: It won’t validate because I made up my own attribute. You could use the title attribute for this but if somebody hovers over your link long enough the browser will show it’s own tooltip over your fancy one. As far as I can see there’s no way to get around this behavior.

Creating the CSS

First let’s style the link a little bit:


a {
color: red;
text-decoration: none;
}


Now we’re going to use the :after pseudo-element and the content property to display the tooltip when the link is hovered:


a:hover:after {
content: " "attr(tooltip)" ";
}


This will pull the tooltip attribute and display it using CSS. Now let’s style it:


margin-top: 5px;
margin-left: 20px;
display: block;
font: 10px arial;
text-decoration: none;
padding: 10px;
background: #372B2D;
color: white;
opacity: .7;


We’re also going to want to make sure that the tooltip is the highest layer, so we’ll add z-index to it:


z-index: 200000;


Now I just know there’s going to be a few of you who are going to try this out then send me angry emails saying something like

Your CSS is a piece of crap! It messes up my whole link when I hover over it!

Well I hate to break it to you, but your browser is a piece of crap. Go visit Browse Happy and get a better one.

IE will take our CSS and make a complete mess out of things when the link is hovered, so we have to hide some of our stylesheet from them by using the child selector hack:

html > body a:hover:after { the styles }

The big problem

Now we get to the biggest limitation. If you try to put together a CSS tooltip using the code I just posted you’ll find out that the tooltip will be displayed inline and will move all your content around. In order to fix this, the link must be positioned absolutely. This will stop the link from shifting and will also let the tooltips be positioned using margins so that they don’t break your pages. But unfortunately, positioning your links absolutely is usually quite impractical.

In conclusion

Can these tooltips really be of any use if their links have to be positioned absolutely?

Actually, yes–but it still probably wouldn’t be the most practical way to do it.

See if we use them in a list, we can position the lists relatively and the links inside the lists absolutely. This will allow the links to be positioned absolutely but stay in their own lists. I’m thinking of using this on my sidebar to show the last five posts when you hover over a category. However, it would probably be smarter to use a variation of Eric Meyer’s Pure CSS Popups, as it uses valid XHTML and works in Internet Explorer.

If you want to see a working example of this article, check out Experimenting with CSS :after. Please feel free to play with the code and see what you come up with. If you get anything good please feel free to shoot me an email, I’d love to hear about it.