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

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.

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?