Nitesh is back to blogging.. Apologies for no updates since last 2 months..

Pure css based tooltip that works with all browsers - blogger hack

Posted by Nitesh Kothari on 18 December 2008
Share this post:
Ma.gnolia DiggIt! Yahoo Furl Technorati Reddit

Tool tip can be very useful in terms of site navigation. I searched for pure css tool tips but all in vain. Most of the tutorials, available online, use JavaScript which slows down the loading time of the page. So, I decided to write a tutorial about designing a pure css based tool tip for Blogger. Yeah, you heard it right – Pure css based Tool Tip.

What is tooltip?
As per Wikipedia: The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small "hover box" appears with supplementary information regarding the item being hovered over.

Demo: Hover over hereTool tip text appears here

Blogger hack by Nitesh Kothari..

This tooltip works with all browsers. Liked it? Just follow the instruction given below and start using it on your blog.

Step 1: CSS Codes
Copy and paste the following code just above </b:skin>

a.tip {position:relative;}

a.tip span {display: none; position: absolute; top: auto; left: auto; padding: 5px 5px 5px 5px; z-index: 100; background-color: #000; color: #fff; border:0px solid #777; width:200px; height:auto; -moz-border-radius: 2px; -webkit-border-radius: 2px;}

a:hover.tip {font-size: 99%;cursor:pointer;}

a:hover.tip span {display: block;position: absolute;-moz-opacity: 0.7;
opacity:0.7; top:auto; left:auto; right:2px; bottom:auto; line-height:14px; font-size:12px;font-weight:normal;}

Now, i will explain you in detail, how these codes work.
a.tip {position:relative;}

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

a.tip span {display: none; position: absolute; top: auto; left: auto; padding: 5px 5px 5px 5px; z-index: 100; background-color: #000; color: #fff; width:200px; height:auto;}

This section of css code controls the tool tip text.
display:none - It makes the tool tip text disppear.
position: absolute - When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
background-color: #000 - you can change the background color as per your wish.
color: #fff - This element changes the font's color.
width:200px - Set the width of the tool tip text container.
height:auto - Set the height of the tool tip text container.

a:hover.tip {font-size: 99%;cursor:pointer;}

Here font-size:99% is used for IE browser.
Cursor:pointer - This makes a pointer appear, whenever you hover over the text. you also change it to help.

a:hover.tip span {display: block; position: absolute;-moz-opacity: 0.7;
opacity:0.7; top:auto; left:auto; right:2px; bottom:auto; line-height:auto; font-size:12px;font-weight:normal;}

This is the section that makes the text area appear whenever you hover over the link.

display: block - makes the tool tip visible.
-moz-opacity: 0.7; opacity:0.7; - This makes the tool tip container transparent.
right:2px; - Container will appear 2px left to the link.

Step 2: HTML Code
Check the following example.
<a class='tip' href='#'>more<span>tool tips text area. know more..</span></a>

In the above code, "more" is the link. When you hover over more, the tool tip appears. The text between span tags is what appears in the tool tip.

Final Words
This is one of the best and easiest blogger hack i have written. I hope you like it. Hover over '?' in this blog for a demo. Is it useful for your blog?



Vivek Barun said...

This blog's template is one of the best which I have seen on a blogspot blog.
is it premium?
and also the tutorials are great. i have subscribed to your blog.
visit me @

John said...

This is a neat hack. I wondering now how I can put it to good use. I didn't know about the opacity CSS property, I'm definitely going to play with that! :-)

Aywren said...

You do an excellent job of breaking this code down for folks (like me) who aren't CSS experts. I had no idea CSS could do that.

This has been spotlighted at my blog! Thanks for a great post!

Chris said...

The box is far away from the link item??

link on left sidebar.. Box appears in right sidebar??

sylvain said...

Thanks, fantastic it works. I tried for 3 days, whith one billion different links.

I was looking for something to change the title="" of my pictures with javascript files, but i can't make it works with my blog, i don't know i miss one step each time.

if you know a good one, a blogger tuto would be great.

sylvain said...

Yes, I know that. I'm lazy to copy and paste the alt="blablabla" or title in span blablabla span, but... it's ok. Good effect It doesn't work on IE, i just see the alt= as usual. Any idea?

Post a Comment

Thank you for commenting at I follow "U comment I comment" movement. All the comment are dofollow. Please do not spam or leave meaningless or short comments. I expect you to leave me meaningful, relative and genuine comments. Thank you.