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
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):
|
1 |
This is code which contains a <a class="tt" href="#">tooltip<span class="tt-dr">Tooltips are fun!</span></a>. |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
/* * this is our anchor */ a.tt { /* * Very important, the tooltip is positioned absolutely and absolute * positioning requires a parent to have either a relative or absolute * position */ position: relative; font-weight: bold; text-decoration: none; } /* Don't show the span when we are not hovering */ a.tt span { display: none; } /* * Once the hover occurs; then we want a transparent background and * the z-index set to a number sufficient to make it stand out. */ a.tt:hover { z-index: 25; /* This may need to be higher */ background-color: transparent; } /* The hover is where the work occurs */ a.tt:hover span { /* * span is not normally a block -- we're limited * with what inline can do */ display: block; position: absolute; /* No margin or border */ margin: 0px; border: 0; /* * Default padding -- this determines where the text * of the span is located */ padding: 128px 34px 30px 34px; /* * Width and height of the element are determined by * the size of our image - (border + padding + margin) * The image is 218 pixels wide and 257 high. */ width: 150px; height: 99px; /* * Don't show anything outside the area -- allowing * it to go outside the bounds will cause issues. They * can be alleviated by placing whitespace between the * sprites, but that only goes so far */ overflow: hidden; /* Miscellaneous text stuff */ font-family: cursive; font-size: .8em; text-align: center; /* * The important bits here are that our background * is transparent and the no-repeat */ background: transparent url(tooltips.png) 0 0 no-repeat; } a.tt:hover span.tt-dl { /* Positioning for the first sprite */ top: 2em; left: -128px; } a.tt:hover span.tt-dr { /* positioning for the second sprite */ background-position: -218px 0px; top: 1.5em; left: -20px; } a.tt:hover span.tt-ul { /* * because this faces in the opposite * direction, we need to change the padding */ padding: 38px 36px 120px 28px; /* And the position */ background-position: -436px 0px; top: -260px; /* I am setting this above the size of the image */ left: -128px; } a.tt:hover span.tt-ur { /* * due to the oddities of the shape (as in not * a "regular shape") we need to adjust the * padding */ padding: 38px 34px 120px 34px; /* Set the position */ background-position: -654px 0px; top: -260px; /* This is more than the size of the image */ left: -20px; } |
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:
|
| Opera | Slight font differences, but otherwise works just fine |
The files I used can be downloaded: tooltip_test
2 comments
Thom Parkin
August 29, 2008 at 7:47 pm (UTC -5) Link to this comment
What a really cool implementation!
You have inspired me to take your work and build on it.
Matt Williams
August 29, 2008 at 7:56 pm (UTC -5) Link to this comment
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. 😉