Designed tooltips using nothing but HTML and CSS

Tooltips are a convenient way to present some extra information about tools on our web page, i.e. some details about a link or an image. However, those tooltips, by default, are not very pretty, to say the least, and only rarely aligned with the page's design in aspects of color and/or font.

If you want to have a tool tip with special colors, special fonts, etc. you're in a bit of a problem. And I haven't even talked about adding images to your tooltip, yet.

One of the popular solutions to the above mentioned problems, is to create a floating div element, add some content to it programmatically and make it appear/disappear using some client side code - JavaScript usually.

While this solves some of the problems (design, adding images), it adds a couple of its own:
- Client side code, it always has some place it doesn't work.
- You now have to worry about IE/FF compatibility.

After tossing and turning about this a bit, I did some try and error rounds, here are my conclusions.

First try, creating a tooltip for an anchor.

A while back I read about the :hover pseudo class and IE. In IE7, for the first time, any element can get the :hover class (in Firefox is was always like that, as far as I remember).

So my first try was to go on that side. It's not something new, a bit of common sense and maybe some reading and you can find this solution.

An anchor is a container, that will hold everything inside (almost). So instead of just text, I added a span to hold my tooltip. Some CSS to design my tool tip, and I'm good to go.
Here is the HTML:

<a href="http://www.cnn.com">
    <span><img src="http://tinyurl.com/5g4js8" alt="CNN logo" width="150" />
    <br />
    Link to CNN's online site</span>CNN.Com
</a>

Here is the CSS to go with it:

a span
{
    display: none;
}

a:hover span
{
    border: solid 1px black;
    background-color: white;
    width: 200px;
    color: Black;
    display: block;
}

Here is how it looks:

Link to CNN's online siteCNN.Com

Oh my God! It looks bad! The span pushes the link down, and it isn't in place. Bad!

Couple of minutes of thinking, and I figured it out. I've added the "position" attribute to both classes, where the anchor is relative, and the span is absolute.
The reason to do that is as follows: the anchor should remain in his place, which is relative to the page, text etc. But the span itself, has to have an absolute position, in relation to it's container, which is the anchor.
Therefor, the new CSS looks like that:

a
{
    position: relative;
}
    
a span
{
    display: none;
}

a:hover span
{
    border: solid 1px black;
    background-color: white;
    width: 200px;
    color: Black;
    display: block;
    position: absolute;
    top: 50%;
    left: 20%;
}

Note that I've added a new declaration for the anchor it self. I have to do that, to define the position. Also, note that I've added the "top" and "left" attributes. I'm doing that, to prevent the tooltip from covering my link.
The new result is here:

Link to CNN's online siteCNN.Com

Much better! Isn't it?

Let's move on!

Tooltips for other objects, in IE7 or Firefox

Having fun with the first step, I naturally moved to something else. What if you want to have the tool tip for an image and not for a link?

The image it self (the "img" tag) is not a container. What would you do?

the solution is actually quite simple: as I said before, almost any tag has the :hover pseudo class support now, just use a different container, with a generic class.

I've changed my CSS to be as follows:

.ToolTipContainer,
.ToolTipContainer *
{
    position: relative;
}

.ToolTipContainer span
{
    display: none;
}

.ToolTipContainer:hover span
{
    border: solid 1px black;
    background-color: white;
    width: 200px;
    color: Black;
    display: block;
    position: absolute;
    top: 50%;
    left: 20%;         
}

Note this declaration: ".ToolTipContainer *". This is done to have anything inside the container relative to the page (same as the anchor, before).

The HTML look like that:

<div class="ToolTipContainer" style="width: 200px;">
    <img src="http://tinyurl.com/65zs7g" alt="" style="width: 200px;" />
    <span>Image in courtesy of:<br />
    <img src="http://tinyurl.com/6lnbpq" alt="Getty Images logo" /></span>
</div>

And the result is:

Image in courtesy of:

(Image was taken from Getty Images)

Doing all that, didn't result anything at first (on my browser). After a bit of reading, I realized that the problem is very simple. IE7 demands a <!DOCTYPE> declaration. I've added:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                      "http://www.w3.org/TR/html4/strict.dtd">

And everything worked just fine. Is that a bug, or a feature? I think it's a feature. You should add this declaration, it's a good thing IE require you to do that.

IE6 Problems

IE6 (and all of its predecessors) is quite a party crasher in this post. Nothing from what I wrote above works in IE 6.

Since many of my clients still support IE6 and below, I had to think of a method that will make it work.

The easiest thing to do, is to use JavaScript just for that. Here is a very good one I've found: An IE6-compatible solution for :hover

But I wanted something without JavaScript, just CSS and HTML. So I went to check a "what-if" scenario. "What if I'll use the link again, as a container, with an image inside?".

I've tried the following HTML with the same CSS as before:

<a href="BLOCKED SCRIPTreturn false;">
    <img src="http://tinyurl.com/65zs7g" alt="" style="width: 200px;" />
    <span>Image in courtesy of:<br />
    <img src="http://tinyurl.com/6lnbpq" alt="Getty Images logo" /></span>
</a>

But it didn't quite worked.
I remembered that with IE6 there were always problems with setting the "top" and "left" attributes in percentages, so I've change it to pixels. But still no go.

I've started to try all kinds of stuff, when eventually it worked(!). I went back on my steps to figure out what I did to make it work, and here is what I've discovered:
In my original CSS (the first one) I've assigned values to the anchor object, but not to the "a:hover" pseudo class. This caused all the properties to default their values (in IE6). Still in my original CSS, I have a class for "a:hover span" only.
The lake of "a:hover" class caused IE6 to NOT trigger this "CSS event".

The first try was that:

a:hover
{
    text-decoration: none;
}

But it didn't work... Still checking my footsteps, I've figured that you have to add something to the class that haven't been defined before. As I mentioned before, the CSS attributes defaults. I had to change something that DIDN'T appear first. The attribute that worked for me was: "display: inline;" but you can also try something like: "list-style-type: disc;" or what ever attribute that doesn't belong to an anchor.

The final CSS looks like that:

a
{
    position: relative;
}
    
a span
{
    display: none;
}

a img
{
    border: 0px;
    cursor: default;
}
 

a:hover
{
    list-style-type: disc;
    text-decoration: none;
} 
       
a:hover span
{
    border: solid 1px black;
    background-color: white;
    width: 200px;
    color: Black;
    display: block;
    position: absolute;
    top: 30px;
    left: 30px;
}

And works just fine!

Note that I've added some attributes to an image inside an anchor to prevent the border and the cursor. You can avoid that if you want, and/or put you styles inline.