CSS Tooltip Hover Description Gadget For Blogger

This is a description gadget for blogger. Many times when explaining some thing we have to explain meaning of some word. It's necessary but explaining it in a different style makes our blog look good. So i have tutorial on description gadget for blogger. It looks like as it is in the image. Dont See The Color of font it can be changed.This awesome tooltip is made by Red Team Design

View Demo

Steps To Add CSS Tool tip To Blogger

• Login to your Dashboard.
• Go to Templates >>Edit Html.
• Find for ]]></b:skin> tag.
• Paste the below code before  ]]></b:skin>.

.tooltip{position: relative;background: #eaeaea;cursor: help;display: inline-block;text-decoration: none;color: #222;outline: none;}.tooltip 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);}.tooltip:hover{border: 0; /* IE6 fix */}.tooltip:hover span{visibility: visible;}.tooltip 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;}.tooltip span:before{border-top-color: #ccc;bottom: -8px;}

• Now,click on Save the Template.
• Now, Write a New Post.
• To have description on any text paste the below code in html section there.

<a href="#" class="tooltip">The Text That Will Have A Tooltip<span>The Actual Description That Appears On Hover</span></a>

Note.1:- Change the Red Text With the Word you want Description and change the Blue Text with Description of that word.

Note.2:- After adding the script in the html section dont go to compose section back other wise it wont work,directly click on Publish. 

• Now,Publish the Post.

It's Done.

Categories: Blogger Tricks , CSS