WordPress Canada

CSS Tooltips

A tooltip is a block of information that appears when you hover over a link. It can be used to show extra information about the link a visitor is about to click. While the technique is normally achieved with javascript I'll show you how to do it with nothing but CSS and a little HTML.

The first thing we need to do is assign a new class to the link where we want the tooltip displayed. For the sake of simplicity let's use tooltip although you could call it whatever you want. Then we wrap <span> </span> tags around the text we want displayed only during hover. Let's use the following sentence as an example:

Hover over this This is an example of a tooltip using nothing but CSS and HTML!link to see an example of a tooltip.

This is how the above sentence is constructed,

Hover over this <a href="#" class="tooltip"><span>This is an example of a tooltip using nothing but CSS and HTML!</span>link</a> to see an example of a tooltip.

Notice the logic? The words This is an example of a tooltip using nothing but CSS and HTML! are contained within the <span> </span> tags inside the link. Once we apply our CSS that block of text will be hidden only to be revealed during hover.

Now we apply our CSS. This is what I used to achieve the result you see on this page. (includes comments)...

a.tooltip{
    position:relative; /*make relative to the parent link which is absolute*/
    z-index:24; /*make IE happy*/
    text-decoration:none;}

a.tooltip:hover{z-index:25;text-decoration:underline;}

a.tooltip span{display:none; /*content of span hidden*/}

a.tooltip:hover span{ /*everything within the span will be displayed only during :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #999999;
    background-color:#252525; color:#fff;
    text-align:center;}

Of course if you want something a little fancier then a javascript solution may be for you.

Note to readers of Planet WordPress Canada: The example in this post may look strange when viewed here. To see the example function as intended you may need to view the post at its original URL.

• RSS
• Digg This
• Tweet This
• Stumble It
• Add to Delicious