Pure CSS Tooltips

Published On September 1, 2008
54 Comments Leave a Comment

Today I’ll teach you how top create tooltips purely using Cascading Style Sheets(CSS). Tooltips are basically little blocks of information that are used to inform users about certain attributes of your website elements. This is a tooltip example!Click on this link to see how a tooltip looks like.

Most tooltips are created with the help of javascript or some other programming languages. This can be cumbersome because not everyone wants to learn Javascript. But CSS tooltips are easy to create and can be loaded quickly without any delay.

Here is what you have to do:-

1. Make a blank HTML file and paste the following text in the BODY part :-

This is a pure CSS tooltip!Tooltip 1

This is the HTML part where we create a hyperlink with the text Tooltip1. In the next step, we are going to hide the text within the span tags which will serve as the tooltip text.

2. Now post this CSS information in your HEAD part of the HTML file :-

.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#FCFBDC;
border:1px solid #333333;
padding:5px;
font-size:11px;
color:#333333;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

If you look at the above code carefully, we have given the property display:none to the span tag inside the hyperlink. This will make the text inside the span tag invisible. Now when you hover your mouse, we make it appear again by giving the property display:block to the span tag on hover. The positioning of the .tooltip span class is relative because we will place the tooltip text relative to the hyperlink area and make the span tag absolute by defining its fixed position. The z-index is used so that tooltips are in the front of the hyperlink and do not overlap. The more the value of z-index, the farther in the front goes the element.

These tooltips can also be integrated into a wordpress theme easily. Just copy the CSS into your style.css file and when creating your posts, just take help of the HTML code and create your own tooltips. Rest is all styling which can be altered according to your own choice. You may also use images inside the tooltip boxes.

So, just learn this trick and you will be making nifty CSS tooltips in no time. And yes, don’t forget to leave a comment!

Download an example file

54 replies on “Pure CSS Tooltips”

Eric Reply

Hi
I am new at all this and have just used these in a site and they’re working great except for… (why is there always a caveat!!) Is there any way to do this without the href – if someone actually clicks on the tooltip “link”, the page refreshes and they lose their place…???
Thanks!

Kamote Reply

Wow, nice post, nways thanks for mr. anand for making this work on ie perfectly. And to the makers as well, peace out! 🙂

Ilene Jones Reply

@mukesh:-

Noted on other sites with a quick google search, add the following:

.aaa2 a.tooltip:hover { /*BG color is a must for IE6*/
background: #E3ECF4;
text-decoration:none;
}

angelina jolie Reply

I love your site. 🙂 Love design!!! I just came across your blog and wanted to say that I?ve really enjoyed browsing your blog posts. Sign: ndsam

TG Reply

I tried running the downloaded file but the tooltip is not showing up. Is there any kind of a restriction on the XP machines with SP2 or SP3?

Leave a Reply

Your email address will not be published. Required fields are marked *