Pure CSS Tooltips
Written by Jai on September 1, 2008 – 2:49 pm - 7,931 views
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!
If you enjoyed this post, make sure you subscribe to my RSS feed!
40 Responses
to “Pure CSS Tooltips”
3 Trackback(s)
- Sep 9, 2008 : Tooltips | Karen Arnold Design, LLC
- Sep 14, 2008 : Design Inspirations for September 12th | isuckatdesign.com
- Sep 15, 2008 : ???? ????? l ???? ??????? l ????? » ????? ???? » ?????? ???? ???? Tooltip ??
on Sep 1, 2008
Good Tips.
on Sep 1, 2008
thanks jai, awesome tips as always!
on Sep 2, 2008
Ahhh.. a CSS tooltip, I’ve always thought of using javascript instead. Good point there
on Sep 2, 2008
Let me add this to my CSS
on Sep 2, 2008
Adding it right now! Great tip
on Sep 2, 2008
Hmmm….nice
on Sep 2, 2008
Thanks!Learning…
on Sep 3, 2008
I am now design a new theme for my blog’s birthday and I may consider adding this to my theme.
Thinks Jai!
on Sep 3, 2008
Nice and easy
on Sep 3, 2008
Thanks. That’s really useful. Is there a way to make this a plugin?
on Sep 4, 2008
Very cool tips here!
on Sep 4, 2008
Cool!!!
on Sep 5, 2008
I used to think that these things were done with JavaScript. Now I know CSS can do it!
Thanks alot!
on Sep 6, 2008
Risorsa davvero carina.. Thanks a lot!
on Sep 8, 2008
great (tool)tip! thanks.
on Sep 8, 2008
I wonder how they look like in Chrome browser?
on Sep 9, 2008
cool. will try this for my tab menu.
on Sep 9, 2008
it is work, let me post about this trick on my blog.
thanks jai!
on Sep 12, 2008
it good Thank!
on Sep 12, 2008
How about a tooltip without CSS or JS? Try this on Chrome:
Trigger a tooltip
Awesomeness!
on Sep 12, 2008
<tooltip title=”This is a tooltip”>Trigger a tooltip</tooltip>
on Sep 17, 2008
Hey,
Thank you! A Good tip!
Regards,
Jack
on Sep 18, 2008
Thank you a good tip!
on Sep 25, 2008
TY! Just what I was after.
on Sep 27, 2008
Thanks for your nice post ^^
on Sep 27, 2008
I do like this especially since it uses CSS and not Js.. but my I ask why you have not used it throughout this whole blog?
on Oct 9, 2008
Thanks ! Good tip & Cool…
on Oct 9, 2008
Thanks
on Oct 22, 2008
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?
on Oct 25, 2008
I really like this useful tip, thank you!
on Nov 9, 2008
It cool thank you for Pure CSS Tooltips
on Nov 12, 2008
Cool
on Nov 21, 2008
It cool thank you for Pure CSS Tooltips
on Nov 21, 2008
one question i want tooltip in fixed position in all resolution. is it possible?
on Nov 21, 2008
Hi there,
Thanks for the tip! Works great in Firefox and IE7, but the tooltip is not showing in IE6. Any help would be appreciated?!
on Dec 20, 2008
Nice work! Very thankful!
on Dec 21, 2008
Good one!