MooTools 1.2 Tooltips: Customize Your Tips

I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually an image or link). Netflix is a perfect example of useful tooltips. When you hover over a movie title, a tooltip displays with a quick summary, cast list, and movie rating. Thanks Netflix -- you've saved me yet another page load!

Tooltips can also provide another method of website branding. Why throw a vanilla tooltip to the user when you can brand your website? MooTools 1.2 provides a Tips plugin that allows for easy-to-customize tooltips. Let me show you how to create a sweet, branded tooltip.

MooTools "Tip" Plugin Tooltip Structure

<div class="options.className"> //the className you pass in options will be assigned here.
    <div class="tip-top"></div> //useful for styling
 
    <div class="tip">
 
        <div class="tip-title"></div>
 
        <div class="tip-text"></div>
 
    </div>
 
    <div class="tip-bottom"></div> //useful for styling
</div>

This DIV structure, which is incorporated right into the Tips plugin, provides classes for each part of the tooltip. We'll be using every class above to create out tooltip.

The Images

Here are the images we'll need to create our tooltip:

	tip-text.png ("sliver")
	tip-top.png
	tip-bottom.png

The sliver image above will let us stretch the tooltip as high as we want. Width will be explicitly set.

The Usage

<a href="javascript:;" class="tipz" title="Awesome, right?::This custom tooltip will help branding immensely!">My Tooltip Link</a>

The CSS

.tip				{ width:295px; font-family:tahoma,arial; background:url(tip-text.png) left top repeat-y; }
.tip-top			{ background:url(tip-top.png) top left no-repeat; height:26px; width:295px; }
.tip-title		{ color:#e95e25; font-weight:bold; margin:0 30px 0 50px; }
.tip-text		{ color:#000; padding:10px 30px 20px 50px; }
.tip-bottom		{ background:url(tip-bottom.png) left bottom no-repeat; width:295px; height:81px; }

You'll notice we're using a lot of background images, which we have to do because we can't inject images directly into the plugin's DIVs. I've put the sliver image in the tip class so that it stretches the entire height of the tooltip.

The MooTools JavaScript

//when the dom is ready
window.addEvent('domready', function() {
	
	
	//store titles and text
	$$('a.tipz').each(function(element,index) {
		var content = element.get('title').split('::');
		element.store('tip:title', content[0]);
		element.store('tip:text', content[1]);
	});
	
	//create the tooltips
	var tipz = new Tips('.tipz',{
		className: 'tipz',
		fixed: true,
		hideDelay: 50,
		showDelay: 50
	});
	
});

Once the DOM is ready, I'm going to parse and store the contents of the element's title tag, which I've separated using ::. Once the titles and texts have been stored, I use the Tips plugin on all anchors with the tipz class. I'm using fixed position tooltips (they wont move around with the mouse) and a delay of 50 milliseconds for both show and delay.

Fading Enhancement

tipz.addEvents({
	'show': function(tip) {
		tip.fade('in');
	},
	'hide': function(tip) {
		tip.fade('out');
	}
});

If you want to make your tooltip a bit more fancy, add the above code to allow the tooltip to fade in or fade out.