Select Page

Today is my first installment in a series in which I will showcase a collection of jQuery plugins that I have made over the past few years. I will be posting one plugin each week over the next two months. This will also include the plugin template that I use and a brief tutorial on authoring your own plugins for jQuery. This template is based on the one produced by Mike Alsup at More information can also be found at the official website. I am also publishing this code on gitHub to encourage involvement from the developer community.

Rather than get bogged down with some of the more complicated plugins, I thought I would start with a nice simple one. Introducing an all purpose tooltip plugin…

This is a simple tooltip plugin that takes the title attribute of an element and replaces it with a DOM node that allows you to style it any way you like. I have included three options to generate the tooltip content.

  1. A string value which is the content of the tooltip. This can include any html elements you would like.
  2. A selector for a document element. The tooltip will then look for that element and insert its contents into the tooltip. The setting domNode: true will activate this.
  3. AJAX content into the tooltip by setting ajax: true and putting the URL of the ajax document in the title attribute.

Other settings for the plugin are as follows:

  • toolID – set the ID of the tooltip so that can have different tooltip styles on the same page. The default ID of the tooltip is “tooltip”.
  • offsetY – the vertical offset of the tooltip relative to its initial positioning.
  • offsetX – the horizontal offset of the tooltip relative to its initial positioning.
  • staticTool – allows the tooltip to be statically positioned relative the DOM element. The default: false will let the tooltip follow the mouse around whilst it is over the element.
  • staticPos – sets the positioning of the tooltip in relation to the associated element. Available positions are: ‘top’, bottom’, ‘left’, ‘right’.

To call the tooltip just add the method tooltip() to your selector and pass the options you want in the document ready function, and call the javascript thus:

staticTool : true,
staticPos : 'top',
offsetY : -10,
offsetX : 10

Here is what the HTML might look like:

    <div id='myElement' title='<p>the content of the tooltip</p>'>
<p>A box with a tooltip on it</p>

Check out the demo page. This demo is also included in the gitHub repository. Happy tooltipping everybody!

Share This