This tutorial shows you how to make rollover ‘bubble’ style tooltips like the one I used in the Bloody Photoshop article. This method uses NO javascript and is completely done in css.

Step 1

Set up your link in HTML:

<a href="#" class="bubbleLink">The link<span class="bubble">tooltip text</span><span class="arrow"></span></a>

The first span will be used to display what ever you want in your tooltip, the second is for the tooltip arrow.

Step 2

The arrow image:

Design an image for the arrow on your tooltip or download the one I’ve used in this tutorial:

Step 3

The css:

.bubbleLink{
}
.bubbleLink span, .bubble{
display:none;
}
.bubbleLink:hover .bubble{
display:block;
position:absolute;
border:1px solid black;
padding:2px;
background-color:#f3efe6;
margin-top:8px;
margin-left:40px;
}

.bubbleLink:hover span.arrow{
display:block;
background-image:url("images/arrow.gif");
width:12px;
height:12px;
position:absolute;

margin-left:50px;
margin-top:-2px;
}

What this does:

By using the display:none, the span’s inside that link are automatically set to be invisible, and when you roll over the link (:hover) the display is set to block, which makes them appear. You must use position:absolute or this will not work properly.

Using the margins I have told the arrow to display just on top of the tooltip box, thus giving it the appearance that it is all one element.

The margin-left and margin-top are only one way of doing this, you could also use left: , right: and z-index: as well.

Step 4

You should get a result like the one below:

examplethis is my tooltip

Tags: css, Design, Tutorials