How to Create a Css Tool Tip in Blogger

What is a Tool Tip :.The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.Simply Tool tip is A message that appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface.

So Follow the Below Steps To Add CSS Tool Tip:..


Login to Blogger < Design < Edit Html.

Now Check the Expand Widget Templates.

Now Search for the </head> Tag and Paste the Below Code Above </head> Tag.

<style type='text/css'>

a.tt{

position:relative;

z-index:24;

color:#3CA3FF;

font-weight:bold;

text-decoration:none;

}

a.tt span{ display: none; }




/*background:; ie hack, something must be changed in a for ie to execute it*/

a.tt:hover{ z-index:25; color: #aaaaff; background:;}

a.tt:hover span.tooltip{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px;

color: #993300;

text-align: center;

filter: alpha(opacity:90);

KHTMLOpacity: 0.90;

MozOpacity: 0.90;

opacity: 0.90;

}

a.tt:hover span.top{

display: block;

padding: 30px 8px 0;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNqZQx9imUFn-ZYmt3mKiKn_c_xHPZA3XswbMiieFpRJpwlhBGqyaAYO5YCKtUur6PA1IOP3KC5EaWAWqwbrpC78wZuZ19lv7tltqf8HiPVYwMkJNsxaP4Ab6EUDUSNo2I8ab2WlmLVhWx/) no-repeat top;

}

a.tt:hover span.middle{ /* different middle bg for stretch */

display: block;

padding: 0 8px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZS_PXyQh1H_vS5pH-hytbtbxcAxc0X0R_facpr8Iuu6QtfgC6SkiHyOXVyN4bkex2sskVMsGtvB-lKHNPT_F6Ktkyx_inTBGd4bVsr6mqB_plRw6n4BUtMItiFWcTDpPAClVwi_aqc-ba/) repeat bottom;

}

a.tt:hover span.bottom{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNqZQx9imUFn-ZYmt3mKiKn_c_xHPZA3XswbMiieFpRJpwlhBGqyaAYO5YCKtUur6PA1IOP3KC5EaWAWqwbrpC78wZuZ19lv7tltqf8HiPVYwMkJNsxaP4Ab6EUDUSNo2I8ab2WlmLVhWx/) no-repeat bottom;

}

</style>

Now Whenever You Want to Add a Tool Tip then Use the Below Code :.

<a href="YOUR-LINK" class="tt">LINK-NAME<span class="tooltip"><span class="top"></span><span class="middle">YOUR-TOOLTIP-MESSAGE</span><span class="bottom"></span></span></a>

That's it Now You're done.Enjoy!!