blogger cool css tooltip trick

Hi there here is trick to add tool tip in your blogger for better interface and user views small trick which will earns you lot this trick will works for all most all website codes even though its might be wordpress or blogspot or blogger or website before going  see my previous trick on how to increase pageviews in blogger here so lets get into procedure

WHAT YOU NEED AND TUTORIAL BELOW:

DEMO below:

STEPS TO GET THIS TRICK:

• Go to the “Template” section in your Blogger dashboard.
• Click on “Edit HTML” and then “Proceed”.
• Using “Ctrl+F”, look for ]]></b:skin>
• Copy the following code and then paste it right before it:

.toltip {
 position: relative;
 background: #eaeaea;
 cursor: help;
 display: inline-block;
 text-decoration: none;
 color: #222;
 outline: none;
}

.toltip span {
 visibility: hidden;
 position: absolute;
 bottom: 30px;
 left: 50%;
 z-index: 999;
 width: 230px;
 margin-left: -127px;
 padding: 10px;
 border: 2px solid #ccc;
 opacity: .9;
 background-color: #ddd;
 background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
 background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
 background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
 background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
 background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
 -moz-border-radius: 4px;
 border-radius: 4px;
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
 box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
 text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.toltip:hover {
 border: 0;
 /* IE6 fix */
}

.toltip:hover span {
 visibility: visible;
}

.toltip span:before,.tooltip span:after {
 content: "";
 position: absolute;
 z-index: 1000;
 bottom: -7px;
 left: 50%;
 margin-left: -8px;
 border-top: 8px solid #ddd;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-bottom: 0;
}

.toltip span:before {
 border-top-color: #ccc;
 bottom: -8px;
}    

• Now save your template and when ever you want this effect use class="toltip" in that tag and your message in <span>.....</span> tags 
• Example to how you use

<a href="#"class="toltip">text here which should have tooltip<span>message in tooltip goes here</span></a>

• hope you like this tutorial

have a nice day, feel free to have clarify your doubts