Recently, we came across the need for some very simple tooltips. The only real caveat was that they needed to be lightweight, and since we already had a number of scripts running on the page, we preferred to make these using just css. Thankfully, our dear friend the <span> tag is up to the challenge of making these tips fairly easily.

Example 1

We’ll start with an easy example. You have a link to somewhere, and want people to see a message before they click on it.

Like this:
Hi Labs visitors! Don’t forget to check out DynamiX Web DesignIt’ll rock your socks off!!

Here’s the HTML:
Hi Labs visitors! Don't forget to check out <a href="http://www.dynamixwebdesign.com">DynamiX Web Design<span>It'll rock your socks off!</span></a>!

It doesn’t matter whether you place the span tag before or after the actual text for the A tag, just as long as it’s inside it.

Here’s the CSS:
.dynamixtip{position:relative;}
.dynamixtip span{display:none;}
.dynamixtip:hover span{display:block;position:absolute; left:0;top:20px;}
This part is just for the look/feel of the tip, style as you wish:
.dynamixtip:hover span{padding:3px;background:#5f9215; color:#fff;border:1px solid #3f6607;font-size:10px;}

Simple isn’t it? Now let’s get more complicated (but still easy).

Example 2

What if you wanted to put a picture in that tooltip, and float it to the right of your link?

Like this:
Balloons are cool!

Here’s the HTML:
<a href="http://www.sxc.hu/photo/1011246">Balloons are cool!<span><img src="http://www.dynamixlabs.com/images/balloon.gif" alt="this balloon rocks" /></span></a>

Here’s the CSS:
.dynamixtip2{position:relative;}
.dynamixtip2 span{display:none;}
.dynamixtip2:hover span{display:block;position:absolute; left:130px;top:-50px;}

Configure “left” and “top” as desired to position your tip, and you’re done.

Example 3

Let’s say you wanted to tell someone that this balloon is red.

This balloon is red!

This one is just as easy as the earlier examples. There are a few ways to do this, depending on what you want/need to do for this item, but we chose to simply encase the image in a div and apply our class to it. Note that IE 6 doesn’t support the hover property when applied directly to a div. Alternatively, you can simply replace the div with another span tag, and add “display:block” to .dynamixtip3. If you want us to get fancier, leave a comment and we’ll be happy to get into some alternatives.

Here’s the HTML
<div><img src="http://www.dynamixlabs.com/images/balloon.gif" alt="this balloon is totally red"/><span>This balloon is red!</span></div>

Here’s the CSS
.dynamixtip3{position:relative;text-align:center;}
.dynamixtip3 span{display:none;}
.dynamixtip3:hover span{display:block;position:absolute;left:65%;top:25%;}
This part is just for the look/feel of the tip, style as you wish:
.dynamixtip3:hover span{padding:3px;background:red; border:1px solid #800;color:#fff;font-size:11px;}

Notice that for this example, we positioned the tip using percentages instead of pixels. You can of course also use em if you prefer.

That’s all there is to it! Pretty simple, huh?

Compatibility:
This method has been tested in and is compatible with Internet Explorer 6 (beware of :hover when applied to divs, as well as the “bottom” declaration on absolutely positioned elements), 7, 8, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.

Tags: css, css tooltip, easy tooltips, no javascript, tool tips

This entry was posted on Wednesday, July 15th, 2009 at 8:31 am and is filed under css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.