How to Create Custom Tooltips with Just HTML and CSS

If you mouseover a link on a website, you'll likely see a simple yellow tooltip. This comes from the < title > attribute of the < a > tag.

These are wonderful for adding some extra information to links - such as the title of the target page, a brief description, etc. However, they can't be styled at all. You're stuck with that bland yellow, and you can't control the width, padding, or font of the tooltip.

Enter some CSS magic. We can use a few nifty CSS attributes to create our own tooltips - completely customizable down to the size, font, color, and location.

Quick CSS Overview

In order to create this tooltip, we need to know about a few CSS attributes.

First the "Display" attribute. This can have several options - block, inline, or none. If you set an element to "display: none" it will not be displayed.

Why would you want an element to be hidden? So that you can only show it under certain circumstances. If you allow something to change the attribute to "display: block" then the element will be displayed. This is how CSS expanding menus work.

Next, we need to know about "a: hover". Anchor elements can have a number of pseudo-classes - hover, visited, and active. By creating an "a: hover" style declaration, the anchor can have different style when the mouse is hovered over the anchor.

Finally, we'll use the "position" attribute. This can be either "position: relative" or "position: absolute". If you give a block-level element "position: absolute" you can place it anywhere on the page and have it display on top of the other elements. It's kind of like a sticky note you throw on top of the rest of the web page.

How Do They Build a Tooltip?

With these three attributes in hand, we can start building our customized tooltips.

The tooltip itself is going to be a block-level element (< span >) with a "position: absolute" setting. This lets the tooltip appear on top of text - creating its own box on top of everything, instead of displacing other text to make room for itself.

The < span > element will start with a "display: none" setting, so that it doesn't appear. Once we trigger it (i.e. mouseover the text), we want the "display" attribute to change to "display: block".

We accomplish this last piece by including the < span > inside an < a > tag. In the style declaration, a < span > inside of an < a > will have "display: none", while a < span > inside of an < a:hover > will have "display: block".

Can I Have Some Code to Copy and Paste?

Here's the basic css style info along with a little HTML to test this out with. Note that all of my tags have extra spaces inside of them so that they display correctly on Associated Content. If you copy and paste this code, remove those extra spaces.

style type="text/css" >

a.info span {
display: none;
}

a.info:hover {
position: relative;
}

a.info:hover span {
display: block;
position: absolute;
border: thin solid black;
background-color: yellow;
}

< /style >

< p >Here's some test text. Here is a bit of text with a
< a class="info" >mouseover tooltip
< span >Ta-da! Tooltip magic! Bla di bla bla.< /span>
< /a >.< /p >Jazzing It Up and Other Final Notes

Granted, this is very basic... but we haven't really styled it yet!

Once you've built the tooltip, you can style it however you wish. A couple things you might want to try out are setting the width of the tooltip (on the "span" declaration), changing the background color, and customizing the margins of the text in the tooltip.

You can also change the position of the tooltip by adding "top:", "left:", "right:", "bottom:", or some combination thereof to the "a.info:hover span" declaration.

A few things to note, as well.

You can add other stuff in the < span > element. For example, you can add < br / > tags to add line breaks. You can add other < a > tags inside. However, the mouse needs to move directly from the hovered anchor into the span block, or else the user will never be able to click on the link - in other words, make sure the tooltip overlaps the link.

Although the tooltip needs to be embedded in an anchor tag, that doesn't mean it needs to be inside a link. Notice how there is no "href=''" attribute in the anchor tag above. You may therefore want to add some special styling to this type of anchor (which I declared as a special class, "info") so that a user knows it is a mouseover but not a regular link.

Finally, the "position: relative" attribute needs to remain inside the "a.info:hover" declaration. Just do it.

Be creative and start styling your own tooltips today.