Bloggermint » Blogger Resource http://www.bloggermint.com Blogger, Wordpress, Web tricks, Web design Sun, 05 Feb 2012 09:40:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 How To Add CSS Tool Tip On Blogger Blogshttp://www.bloggermint.com/2010/02/how-to-add-css-tool-tip-on-blogger-blogs/ http://www.bloggermint.com/2010/02/how-to-add-css-tool-tip-on-blogger-blogs/#comments Thu, 25 Feb 2010 22:00:00 +0000 Franklin Manuel http://bloggermint.com/2010/02/how-to-add-css-tool-tip-on-blogger-blogs/ Continue reading →]]> 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.

]]> http://www.bloggermint.com/2010/02/how-to-add-css-tool-tip-on-blogger-blogs/feed/ 4