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.

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 here Tool tip text appears here

Blogger hack by Ritesh Sanap.

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

1. Login to your blogger dashboard.
2. Find </b:skin>
3. Just above the code add the CSS given below :
   

   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;}

4. You Have Successfully Installed the widget.

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.

Example :moretool tips text area. know more.