Aug 29

CSS tooltips using CSS Sprites

Thought Bubbles!

Thought Bubbles!

For a project I’m currently working on I wanted to make some “bubble” tooltips.  In order to cut down on the size/number of images, I’m using css sprites.  A quick google reveals that nobody else has (at least on the first page) put together tooltips using sprites.  The technique will work with any sort of image, so you needn’t use the “bubbles”.  So, here’s how I did it, with the caveats/gotchas.

CSS tooltip sprites

CSS tooltip sprites

First off, I created my graphics in gimp.  I’m using PNG’s because I want to have transparancy.  GIF’s would work, but there’s issues with the color space.  IE 6 doesn’t handle PNG transparency, so you’ll want to use one of the many solutions for png transparency.  (I’m finding that they aren’t working — as best I can tell it has to do with background-position.  Or it may have something to do with me running ie through wine, I don’t know…)

In order to get the tooltips to work, I use the following html (css will follow):

Note that I’ve placed a span inside the anchor tag. This is how the css identifies it as a tooltip related to the anchor, but more important, it’s what’s needed to make the :hover work. Unfortunately, IE doesn’t recognize hover on anything but anchor tags.  Our CSS magick follows:

I’m attaching code here; it has been tested in:

Browser Results
Firefox 3 Works perfectly
IE 6 Positioning and sprite works; but it isn’t handling transparency.
Safari for Windows Attempt:
  1. It hates compiz. Major Fail! (screen goes wonky).
  2. Works fine after I change my window manager
Opera Slight font differences, but otherwise works just fine

The files I used can be downloaded: tooltip_test


  1. Thom Parkin

    What a really cool implementation!
    You have inspired me to take your work and build on it.

  2. Matt Williams

    Thanks! I’d love to see what you come up with.

    I had fun with this — one thing I’m thinking about doing in the current project is to use images for the tooltips — in order to use my fonts that I want. But the span was an interesting challenge. 😉

Leave a Reply

%d bloggers like this: