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!

5 Responses so far!

  1. end of world

    Good article. thank you

  2. Thanks for the tip. But I wanted to show tooltip on my every post title. I am looking such a code which will show post title as tool tip hovering mousepointer on that title.

  3. informative article …
    thanks for sharing …
    appreciated …

  4. i found tooltips in one of starwood web… that is realy nice

  5. yeah… actually the css users will get motivation

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>