Simple Tool Tip with jQuery

December 1, 2009
By SeanJA

I saw a post that talked about how to make a simple tool tip with jQuery, but that post did not make a plugin of it. It just added the function to the global scape, meaning that it was not chainable and it would only be applied to the a element. So I took the code for the first example as a starting point and turned the first example into a plugin. So, based on the first example, here we have yet another tooltip plugin, it uses the title attribute so it is perfectly accessible to people without javascript enabled. It can be applied to any element, and it is chainable and it will also be applied to new elements on the page instead of you having to re attach it to every item that you add to the dom.

Here is the javascript:

// starting the script on page load
$().ready(function(){
	$('a').simple_tip();
});

The html:

 
<a href="#" title="This is a tooltip">I have a tool tip!</a>
 
<a href="#">I don't have a tool tip!</a>

The demo.

The code is available here:
http://code.google.com/p/jsimpletip/downloads/list

The code is licensed:
Mit and GPL v2

Share and Enjoy:
  • Twitter
  • DZone
  • del.icio.us
  • Slashdot
  • Digg
  • Reddit
  • HackerNews
  • Technorati
  • Google Bookmarks
  • RSS
  • StumbleUpon
  • Yahoo! Buzz
  • LinkedIn
  • Facebook
  • Print
  • PDF
  • email

Related posts:

  1. JQuery and WordPress
  2. Using the jQuery-UI Autocomplete Widget
  3. A couple useful jQuery Snippets
  4. jQuery :contains selector and unicode characters
  5. Dynamic Images with PHP

Leave a Reply

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

*