Web Cash

Hover your mouse over this link to Web Cash. Notice the tooltip?

You can achieve a tooltip like that on any anchor text by defining a “title” attribute. However, it will also be bland, yellow, and un-styled. You can’t control the size of the box, style of the font, or the general appearance of the tooltip at all.

But there’s a better way. This tutorial will show you how to create custom tooltips using simple, valid HTML and CSS. Once you’ve created the basic tooltip, you can style it to your heart’s content.

Before diving into the code, we should take a look at the CSS/HTML mechanics that we’ll need to build this thing. If you feel confident that you know everything… then feel free to skip ahead. Otherwise, read along.

First, let’s take a look at our goal. We need to…

• Create a box to hold the tooltip.
• Make the box invisible.
• Make the box visible once we mouse over our target text.
• Make the box appear “above” the page, instead of inline with the page.

Now It’s Here, Now It’s Not - Pseudo Classes

In order to make our box appear and disappear, we need to use a little html/css magic called pseudo-classes. Without these, we’d have to use javascript to detect when we mouse-over the target text.

Anchors (<a>) tags have a few built in pseudo classes - a:visited, a:active, and a:hover. This allows you to style different types of anchors differently. For example, an anchor tag will usually change color when you hover over it.

We’re going to use this to make our box appear and disappear. The box will initially be invisible. Then, using the a:hover pseudo-class, when we hover over the anchor tag the box will become visible.

Creating a Box - Holding the Tooltip

In order to display our tooltip and make it appear and re-appear, we need to create a container for it. Then we need to position it.

What’s the natural container tag? A <div>. Unfortunately, Internet Explorer doesn’t like the <div> tag, so we’ll use a <span> tag instead. To hell with semantics. It’s still valid html.

Initially, this <span> is going to be styled with display:none. Then, when the a:hover becomes active, it will switch to display:block.

We also need to position the span so that it appears “above” the rest of the page. We’ll need two css attributes to do this. First, we’ll give the anchor a position:relative declaration. Then, we give our span a position:absolute declaration.

This will make the tooltip hover above the rest of the page - and it’s position will be based on the relative position of the anchor text.

Building the HTML and CSS

Now that we know the basic building blocks, let’s look at the actual markup.

Here’s the HTML you would use to create the tooltip.

<p>Here’s some more sample text.  This 
  <a class='info'>anchor<span>CSS tooltip.  We 
  can style this!</span></a> has a css-based tooltip
  that we can style to our liking.</p>

There’s three basic elements here. The regular text - enclosed in a p tag. Our target text is enclosed in an anchor tag with class “info.” The actual tooltip is in a <span> tag inside the anchor tag.

Now, let’s look at the css necessary to make the tooltip magic work. This is the barebones version - we’ll style it a bit later.

a.info span {
    display: none;
}
 
a.info:hover {
    position: relative;
}
 
a.info:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

This sets up what we discussed before. The tooltip <span> is initially invisible. Since it’s inside the anchor tag, we can use the a.info:hover span declaration to style the <span> differently when the anchor is hovered over - and then we make the <span> appear.

Voila! Tooltip.

Mouse over this textThis is the barebones tooltip. to see what we’ve built so far.

At this point, you’ll probably see a blur of text appearing on top of some other text. Not very readable… but that’s because we haven’t styled it yet.

Mouse over this textNow this has a bit of styling. to see a slightly styled tooltip.

We added a few things here - I styled the basic a.info so that it had a different color and no text-decoration. Then I styled the span with a bunch of stuff - background color, border, text color, width, and padding.

I also used position:top to offset it 1.5em from the top-left of our anchor, and position:left to offset it 1.5em from the top-left of our anchor.

Here’s the new css…

a.tooltip {
color: gray;
text-decoration: none;
}
 
a.info span {
display: none;
}
 
a.info:hover {
position: relative;
}
 
a.info:hover span {
display: block;
position: absolute;
top: 1.5em;
left: 1.5em;
background-color: #eeeeee;
border: thin solid black;
color: black;
width: 12em;
padding: .5em;
}

And that’s about all there is to it. With the html and css you built in this tutorial, you’ve got the mechanics needed to build your own tooltip.

It’s up to you to style it according to your site’s theme and make it pretty. You could add a gradient background, style the font for some extra spacing and/or size, set the width to the way you want, and more.

Tags: anchor, css, html, tooltip, tutorial