Add A CSS Tooltip Gadget To Your Blogger

Here’s a nice-looking tooltip gadget that some of you might like to have on your website. It requires no images and no JavaScript, it only runs on pure CSS3 alone, so you don’t have to worry about it slowing down your site’s loading time.
The code is built by Red Team Design and the tutorial on how to apply it to Blogger is by Aditya Thakker of Blog-Toolz. Check out the demo.
Follow the steps below:

• 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 CSS code and then paste it right before it:

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

• Save your template and you’re done!

Now to check and see how it looks on your site, simply create a new post and just add the class=”tooltip” attribute inside the tag of the text you want to have the tooltip on. (See example below)

<a href="#"class="tooltip">This is the text that will have the tooltip<span>This will be the tooltip’s message</span></a>

If you did everything right, then you should then see a tooltip pop up over the text that contains the tag. Enjoy!