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!
@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;
}
Sign: umsun Hello!!! rcuwwymhyw and 6621ssgfhphzye and 3127Sorry, what did you mean?? A??
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
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
Looks nice, but there is no text in the tooltip box.
[Firefox 3.5]
Very very nice. Thx a Lot !
for ie6 add
a.tooltip:hover { visibility:visible; }
that’s it!.
hi,
this does not work in IE6 can any one solve this bug?
any help will be appreciated…..
thanx