Tooltip For Blogger Using jQuery & CSS

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 11 Comments

Recently, I came across an interesting tutorial about displaying Tooltip using jQuery. You may refer to "callingallgeeks.org - subscription box" to see an example about the same. In this article, we'll be learning about adding a simple HTML Tooltip to our blogger posts/template. You may check out the live demo by hovering your mouse over the links below.

Creating Unique Navigation BarsThis article illustrates about creating unique navigation bars using Adode PhotoShop and CSS Sprites. By using CSS Sprites, we achieve the following advantages - save bandwidth (less image size), reduce the number of HTTP requests and make our blog browser compatible. | About CSS SpritesThis article explains the fundamentals about CSS sprites with a simple hover effect using the same.

Cool trick. Isn't it? Well, if your answer to the question is "Yes", then consider reading the rest of the article to get this hack installed on your blog as well. I have used the standard jQuery file that's hosted by Google in my tutorial. If you wish to host it on your blog ( for WordPress Users), then download the latest JavaScript file from jQuery website. Now, let's move to the tutorial.

1. Navigate to "Design >> Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Download the following text document (includes the CSS and JavaScript to run the widget) - CODE FOR TOOLTIP WIDGET. Replace the above code with the code present in the text document.

3. Save your template. That's it. 

To make the Tooltip actually work, you need to define an anchor tag and span tag in your post or anywhere in your template (within the body tags) with the following classes ( tip_trigger and tip) present in it. The coding should look similar to the one shown below.

<a href="YOUR LINK HERE" class="tip_trigger">
YOUR LINK TITLE
<span class="tip">
YOUR TEXT HERE
</span></a>

That's it! Replace "YOUR LINK TITLE" with the title of your link, "YOUR LINK HERE" with the URL you wish to point to and "YOUR TEXT  HERE" with the description you want to show the visitor on mouse hover. You need to repeat the same procedure to have multiple Tooltips on your blog. As far as the browser compatibility is concerned, the Tooltip hack is supported by the following major web browsers - Firefox, IE, Safari, Chrome, Opera, etc...

I hope you enjoyed this hack. Well, I'm just learning the basics about jQuery and CSS now. So, if there are any jQuery geeks out there, then I'm open to your suggestions. Share your opinions via comments. I'll soon post the coding for the subscription box using Tooltip similar to the one on "callingallgeeks".

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• CSS Tricks, jQuery