CSS Tooltips

Recently I worked on a project that involved a list of terms with hidden definitions. The requirement was that the user could reveal the definition by either clicking on the item or hovering the mouse over it. There are many applications for this concept—self-quizzes in e-learning, for example.

One solution is a javascript alert box, but that requires too much clicking (click to open it, click OK to close it). This option also won't work if the user has Javascript disabled in her browser. A simple alternative is tooltip text, using the title attribute either in a span tag or in a hyperlink anchor tag. For example:

Mouseover a vocabulary word to see it in German:

Dog (using span)

Cat

Fish

Bird

This works OK, but the tooltip takes a fraction of a second to appear, and it doesn't look very interesting.

Enter CSS—a relatively easy solution that gives the designer much more control, and ultimately gives the user better information. The tooltip technique is adapted from Pure CSS tooltips.

The code is easy—you place the hidden text in a span element, then use the CSS to hide or display the span. Here's my vocabulary example, this time using CSS:

Mouseover a vocabulary word to see it in German:

Here is the CSS:

/* --------------- Tooltips ---------------- */

a.info {
    position:relative; /*this is the key*/
    z-index:24; 
    text-decoration:none;
}
a.info:hover {
	z-index:25; 
}
a.info span {
	display:none;
}
a.info:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em;
    left:2em; 
    width:12em; 
    height:1.5em;
    border:1px solid #ebad14;
    background-color: #CCCCFF; 
	color:#000000;
    text-align:center;
	vertical-align:middle;
	text-decoration:none;
}

And the syntax for the line that contains the tooltip:

<p><a href="#" class="info">Dog<span>der Hund</span></a></p>

See a live example of this technique I implemented at the Arizona Smokers' Helpline website.

Update Sept. 07: This is just one example of how to make tooltips. There are a lot more, some simple, some much fancier.

Other Resources

Eric Meyer's pure CSS popups