How To Add CSS Tool Tip On Blogger Blogs

There are many tool tips available over the Internet and most of them really takes time in displaying the tip. This many times irritate your blog visitors. So in order to create a tool tip which should response at a fast rate, I choose CSS. This tutorial will help you to add CSS tool tip on blogger / blogspot blogs. The installation is very simple as it involves only two step.

tool tip for blogger

Live Demo

Step 1: Search for ]]></b:skin> and replace it with the below code

$('.show-tooltip').each(function(){
$(this).after($('<span/>')
.attr('class', 'show-tooltip-text')
.html($(this).attr('title')))
.attr('title', '');
});
]]></b:skin>

Step 2: Now in order to show tool tip for link. Include class=”show-tooltip” title=”Your description here” inside the text link code

For example

<a href=”http://bloggermint.com/” class=”show-tooltip” title=”Bloggermint focus on blogger tips and tricks”>Bloggermint</a>

Now save your template and see the effect. This is a simple script to show tool tip. You can share your own ideas at Bloggermint forum.

February 25, 2010. This entry was posted in Blogger, CSS, Tutorials and tagged , , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!