I recently attempted to add a jQuery tooltip to my website, but I had some trouble putting together a decent solution. Through that experience, I’ve assembled this round up of some of the best and most popular plugins I’ve found.

jQuery Tooltip

Developed by Jorn Zaefferer, this plugin “displays a customized tooltip instead of the default one for every selected element. The tooltip behaviour mimics the default one, but lets you style the tooltip and specify the delay before displaying it. More customizations are available via plugin options.”

It’s very clean and works smoothly, plus it requires little effort to set up and get running. The official demo page is stuffed with examples that will surely help you get started.

To install this plugin, download the package from the project home page. Once you have the files unzipped into your directory of choice, you can start having a look at the examples included or just head on to including the script into your HTML document.

<script type="text/javascript" src="/projects/js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="/projects/js/jquery.tooltip.min.js"></script>

A common problem that arises when dealing with tooltips is the different styling of balloons in the same page. Tooltip provides an easy way to overcome this issue by means of the extraClass option.

$(function () {
	// All elements with class "pretty" will have the same style
	$(’.pretty’).Tooltip ({
		track: true,
		delay: 0
	});
});
 
// We can use this instead to have tooltips with different appearence on the same page
$(function () {
	$(’.pretty1’).Tooltip ({
		track: true,
		delay: 0,
		extraClass: "fancy1"
	});
 
	$(’.pretty2’).Tooltip ({
		track: true,
		delay: 0,
		extraClass: "fancy2"
	});
});

The CSS would be

.fancy1 {
	background-color: blue;
}
 
.fancy2 {
	background-color: yellow;
}

There is also a very useful option that lets you fix PNG transparent backgrounds in IE: just add fixPNG: true to make IE aware there’s some sort of transparent background!

$(function () {
	$(’#pretty’).Tooltip ({
		track: true,
		delay: 0,
		extraClass: “pretty1	”,
		fixPNG: true,
		opacity: 0.66
	});
});

Beautytips

Beautytips is a simple to use balloon style tooltip plugin brought to the world by Jeff Robbins. Balloons are drawn dynamically using the canvas HTML 5 element, and options include corner radius, spike length and width, stroke width. The balloons can auto-position based on the most available area in the current display window or they can be positioned according to an array of preferences (just left or right for instance).

The demo page is a huge help for beginners because it shows many ways to accomplish some of the most common tasks a ballooner may want to see realized.

Installation is no big deal. As usual, just download the package and have fun. A special note, though, goes to the other plugins included; since BeautyTips can work with bgiframe (to fix z-index problems) and (for a better control of hover events), they both come along with BeautyTips files. If you plan to make this work in IE, don’t forget to have a look at Google’s ExplorerCanvas, to support Canvas in IE, also included.

Basic usage is somewhat simple and is no longer than

$(selector).bt();
// or, if you want to add some text
$(selector).bt('Content text');

More advanced solutions are to change the trigger event and position, style and appearence of the balloon for a better visual experience.

$(selector).bt ({
	fill: <color>
	cssStyles: {color: <color>, fontWeight: <normal|bold>, width: <int>},
	padding: <int>,
	cornerRadius: <int>,
	animate: <bool>
});

qTip

qTip “is an advanced tooltip plugin for the ever popular jQuery JavaScript framework” written by Craig Thompson. “Built from the ground up to be user-friendly, yet incredibly powerful, qTip provides you with tons of features like rounded corners and tips, and best of all… it’s completely free!”

Installation is a no-brainer, just unzip and include:

<script type="text/javascript" src="/projects/qtip/js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="/projects/qtip/js/jquery.qtip-1.0.0.min.js"></script>

Documentation and demos are pretty extensive and cover a lot of common problems and useful information. There’s also a very well-made tutorial describing in detail how it works and what are the options you have to tweak in order to change style dimensions and everything else.

Amongst the three plugins I’ve covered, this is my favorite because of its many options and straight-forward approach. Also, if you ever wanted to give tooltips a tooltip (and who hasn’t?), now you can!

<script type="text/javascript">
// Create the tooltips on document load so we know the DOM is ready
$(document).ready(function()
{
   var i, styles, tooltipCount, content;
 
   // Setup a styles array and tooltip count variable
   tooltipCount = 0;
   styles = [ 'dark', 'cream', 'green', 'red', 'light', 'blue' ];
 
   // Define the tooltip creator method
   function createTooltip()
   {
      // Setup the content string
      content = '';
      for(i = 0; i < tooltipCount; i++)
         content += (i > -1) ? ' tooltip\'s ' : 'tooltip ';
 
      // If tooltip count is greater than 7, exit
      if(++tooltipCount == styles.length + 1) return;
 
      // Initialize the tooltip on the previous tooltip
      this.elements.tooltip.qtip(
      {
         content: 'I\'m a'+content+' tooltip!', // Concat. the generated content string
         position: {
            corner: {
               tooltip: 'topMiddle',
               target: 'bottomMiddle'
            },
            adjust: {
               resize: true,
               scroll: true
            }
         },
         show: { ready: true }, // Show the tooltips when they're ready
         hide: false, // Don't hide them
         style: {
            name: styles[ tooltipCount - 1 ],
            width: { max: 700 }, // Set a high max width so the text doesn't wrap
            tip: true // Give them tips with auto corner detection
         },
 
         // Refer back to this function onRender
         api: { onRender: createTooltip  }
      });
   }
 
   // Create first tooltip targetting the first h2 in the #content element
   createTooltip.call({ elements: { tooltip: $('#content h3:first') } });
})
</script>

Conclusion

These are only three of the many plugins available out there, some a little better, some with more features and cool effects. Just for completeness and respect towards other plugin developers, here is a list of other solutions I’ve found on the web. Please feel free to leave your opinion and add to the list of all the tooltip plugins I may have forgotten.

• Bubble Tooltips by Alessandro Fulciniti
• Help Balloon by Beau Scott
• jTip by Cody Lindley
• jQuery Ajax Tooltip by Caleb Tucker?
• Simple tooltip by Marius Ilie?
• wTooltip by Abel Mohler

Obviously, the key to get nice stuff done is… try, read, understand and try again – so experiment with these plugins and find the one that best suits your needs. Or write your own!