30 Days of Mootools 1.2 Tutorials - Day 19 - Tooltips

Mootools 1.2 Tooltips Tutorial

Note: I have somehow broken the examples in IE, I’ll fix it as soon as I can and post what the problem turned out to be. Thanks.
If you haven’t already, be sure and check out the rest of the Mootools 1.2 tutorials in our 30 days series.

Today we are going check out the Mootools tooltip bundled plugin. With “Tips,” you can easily add custom tooltips with a title and content, custom styles, and fade in/out effects. We will examine the tooltips options and events, as well as a few tools that will let you add and remove tooltips from elements. Finally, we will learn how to have multiple styles of tooltips on the same page.

The Basics

Creating a new tooltip

Creating new tooltips is very simple. First, let’s create the element where we will attach our tool tip.

<a>
</a><a id="tooltipID1" class="tooltip" title="1st Tooltip Title" rel="here is the default 'text' of 1" href="http://www.consideropen.com">Tool tip 1</a>

Mootools 1.2 tool tips will display the title and the rel text by default. If there is no rel copy, it will display the href.

To create a new default tool tip:

var customTips = $$('.tooltip');
var toolTips = new Tips(customTips);

Without any styling, you will get a tool tip that looks like this:

Tool tip 1

Styling your tooltip

The mootools output gives you a lot of control over the style—take a look at the tooltip html:

//you can assign a class name for the tooltip wrap
//in the options
<div class="options.className">
<div class="tip"></div>
</div>

Notice the top and bottom divs. This lets you easily add rounded top and bottom sections, or other style effects.

Now, lets set up our first option and add some CSS. The html above features a wrap div with the class name “options.className.” By assigning a class name to your tips, you can style them individually and not style all mootools tooltips on your page.

var customTipsB = $$('.tooltipB');
var toolTipsB = new Tips(customTipsB, {
    className: 'custom_tip'
});

Finally, we add some CSS:

.custom_tip .tip {
	background-color: #333
	padding: 5px
}
 
.custom_tip .tip-title {
	color: #fff
	background-color: #666
	font-size: 20px
	padding: 5px
}
 
.custom_tip .tip-text {
	color: #fff
	padding: 5px
}

Tool tip 2

Options

There are only five options in Tips and they are all pretty self explanatory.

showDelay

Default is 100

An integer measured in milliseconds, this will determine the delay before the tooltip shows once the user mouses onto the element.

hideDelay

Default is 100

Just like showDelay above, except this integer (also measured in milliseconds) will determine how long to to wait before hiding the tip once the user leaves the element.

className

Default is null

Like we saw in the example above, this lets you set a class name for the tooltip wrap.

offsets

Default is x: 16, y: 16

This determines how far away from the element the tooltip will appear. ‘x’ refers to the right offset, where ‘y’ is the down offset (both relative to the cursor IF the ‘fixed’ option is set to false, otherwise the offset if relative to the original element).

fixed

Default is false

This sets whether or not the tooltip will follow your mouse if you move around the element. If you set it to true, the tooltip will not move when you move your cursor, but will stay fixed relative to the original element.

Events

The tooltip events remain simple, like the rest of this class. There are two events, onShow and onHide, and they work as you would expect.

onShow

This event fires when the tooltip shows. If you set a delay, this event will not fire until the delay is up.

onHide

Just like onShow above, but this fires then the tip hides. If there is a delay, this event will not fire until the delay is up.

Methods

There are two methods for Tips, attach and detach. This lets you target a specific element and add it to a tooltip object (and thereby inherent all the settings in that class instance) or detach a particular element.

.attach();

To attach a new element to a tooltip object, just state the Tip object, the tack on .attach();, and finally place the element selector within ().

toolTips.attach('#tooltipID3');

.dettach();

This method works just .attach, but has the opposite outcome. First, state the Tip object, then add .dettach(), and finally place your element selector within ().

toolTips.dettach('#tooltipID3');

Example

For this example, we will create two instances of the Tips plugin, so we can have two different styles of tooltips. We will also integrate the options, events and methods we saw above.

var customTips = $$('.tooltip');
 
var toolTips = new Tips(customTips, {
	//this will set how long before
	//the tooltip will wait to show up
	//when you mouseover the element
	//in milliseconds
	showDelay: 1000,    //default is 100
 
	//this is how long the tooltip
	//will delay bofore hiding
	//when you leave
	hideDelay: 100,   //default is 100
 
	//this will add a wrapper div
	//with the following class to your tooltips
	//this lets you have different styles of tooltips
	//on the same page
	className: 'anything', //default is null
 
	//this sets the x and y offets
	offsets: {
		'x': 100,       //default is 16
		'y': 16        //default is 16
	},
 
	//this determines whether the tooltip
	//remains staitionary or follows your cursor
	//true makes it stationary
 	fixed: false,      //default is false
 
	//if you call the functions outside of the options
	//then it may "flash" a bit on transitions
	//much smoother if you leave them in here
	onShow: function(toolTipElement){
	    //passes the tooltip element
		//you can fade in to full opacity
		//or leave them a little transparent
    	toolTipElement.fade(.8);
		$('show').highlight('#FFF504');
	},
	onHide: function(toolTipElement){
    	toolTipElement.fade(0);
		$('hide').highlight('#FFF504');
	}
});
 
var toolTipsTwo = new Tips('.tooltip2', {
	className: 'something_else', //default is null
});
 
//you can change the tooltips values by using .store();
//to override the rel, you can use the following code
$('tooltipID1').store('tip:text', 'You can replace the href with whatever text you want.');
$('tooltipID1').store('tip:title', 'Here is a new title.');
 
//the following code will not change the tooltip text
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
 
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');

Tool tip 1

Tool tip is detached

Tool tip 3

Tool tip detached then attached again.

A differently styled tool tip

To Learn More…

Read over the docs section on Tips. Also, here is a great article by David Walsh on customizing your Mootools Tips.

Download a zip with everything you need

Tomorrow’s Tutorial

For day 20, we will look at a small project, how to create various types of tabbed content.

Comments, Suggestions or Questions?