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 http://www.learningjquery.com/2007/10/a-plugin-development-pattern. 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.
- A string value which is the content of the tooltip. This can include any html elements you would like.
- 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.
- 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’.
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>