Pure CSS Tooltips

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 :

<a href="#" class="tooltip"><span>This is a pure CSS tooltip!</span>Tooltip 1</a>

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