Add ToolTip (On Hover Text) To Your Blog/Website

Tooltip in simple terms is a text-box which is displayed over a hyperlink, when you hover your mouse cursor on the link.
These tooltips are used to briefly give the information about the target page.

See ToolTip in action here: ToolTip For Blogger

To add similar tooltips to your blog, follow these instructions:

Log in to Blogger, go to Layout -> Edit HTML, and find(CTRL+F) this:

</head>

And immediately ABOVE/BEFORE it, paste this code:

<!--TOOLTIP-STARTS-->
<style type='text/css'>
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;

position:absolute;

float:left;

white-space:nowrap;

top:-2.2em;

left:.5em;

background:#fffcd1;

border:1px solid #444;

color:#444;

padding:1px 5px;

z-index:10;

}
</style>
<!--TOOLTIP-STOPS-http://bloggerstop.net-->

You may modify the code in red as per your wish and then save the template.

And now onwards, add code similar to this to any link, if you want to display tooltip over it.

<a href="#">Link-Title <span>Hidden-Tooltip</span></a>

Credits: CssGlobe
Image credits: Hogki.at