30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
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.
Creating new tooltips is very simple. First, let’s create the element where we will attach our tool tip.
<a id="tooltipID1" class="tooltip_demo_one" 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_demo_one');
var toolTips = new Tips(customTips);
Without any styling, you will get a tool tip that looks like this:
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;
}
There are only five options in Tips and they are all pretty self explanatory.
Default is 100
An integer measured in milliseconds, this will determine the delay before the tooltip shows once the user mouses onto the element.
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.
Default is null
Like we saw in the example above, this lets you set a class name for the tooltip wrap.
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).
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.
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.
This event fires when the tooltip shows. If you set a delay, this event will not fire until the delay is up.
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.
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.
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');
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');
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_demo');
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 detached then attached again.
Read over the docs section on Tips. Also, here is a great article by David Walsh on customizing your Mootools Tips.
For day 20, we will look at a small project, how to create various types of tabbed content.