We will also learn about the options and events of tooltips, as well as some tools for adding and removing tooltips from elements. Finally, we will learn how to make a page have multiple tooltips of different styles.
Basic knowledge
Create a new tooltip
Creating a new tooltip is very simple. First, let's create a link to add tooltips:
Reference code:
<a class="tooltipA" title="1st Tooltip Title" rel="here is the default 'text' of 1" href="">Tool tip 1</a>
MooTools 1.2 tooltips will display the values of title and rel attributes in the link by default. If there is no rel attribute, the href attribute value will be displayed.
Now let's create a new default toolbar prompt:
Reference code:
var customTips = $$('.tooltipA');
var toolTips = new Tips(customTips);
Since no style is used, you will see a tooltip like this:
Tool tip 1
Use styles for your tooltips
MooTools allows you to control its output to a large extent - let's take a look at the html code of the tooltip:
Reference code:
// You can specify in options
// The CSS class name of the tooltip container
<div class="">
<div class="tip"></div>
</div>
Pay attention to the divs at the top and bottom, which you can easily add rounded corners to the top and bottom, or other style effects.
Now let's create one of our first options and add some CSS. The above html code will be rendered in a CSS style called "". By specifying a CSS class name to our tooltip, we can give it a standalone style without affecting other MooTools tooltips on the page.
Reference code:
var customTipsB = $$('.tooltipB');
var toolTipsB = new Tips(customTipsB, {
className: 'custom_tip'
});
Finally, let's add some more CSS:
Reference code:
.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 the Tips class, each with good self-interpretation (that is, you can understand what it means at a glance).
showDelay
The default value is 100
An integer in milliseconds, which will determine how long the tooltip will be displayed after the mouse moves over the element.
hideDelay
The default value is 100
Like the showDelay above, but this value (also in milliseconds) will determine how long the mouse will hide the tooltip after it leaves the element.
className
Default is null
As you can see in the example above, this allows you to set a CSS class name for the tooltip container.
offsets
Default is x:16, y:16
This will determine the distance from the tooltip to your element, the value x is the distance from the right of the element, and y is the distance from the downwards of the element (if the fixed option is false is specified, it will be the distance from the mouse pointer, otherwise it will be the distance from the element).
fixed
Default is false
This setting determines whether this tooltip follows the mouse when your mouse moves over the element. If set to true, the tooltip will not move with the movement of the mouse pointer, but will just stay in a fixed position near the element.
event
Like the rest of this class, the tooltip events are still very simple. It has two events: onShow and onHide, which will work as you expect.
onShow
This event will be fired when the toolbar is displayed. If you set a delay, this event will be fired until the tooltip appears.
onHide
Like the onShow event above, it is relatively triggered when the tooltip is hidden. If delay is set, this event will also be triggered until the tooltip is hidden.
method
The Tips class has two methods - attach and dettach. Through these two methods, you can add a tooltip to a specified element (of course, these tooltips will have the same settings), or remove the tooltip from a specific element.
.attach();
To add a tooltip to a new element, you just need to add .attach(); after the Tip object, and finally put the selector of this element in brackets.
Reference code:
('#tooltipID3');
.dettach();
This method is the same as the .attach method, but they behave in the opposite way. First, write down the Tip object, and then add .dettach() after this element; and finally put the selector of this element in brackets.
Reference code:
('#tooltipID3');
Code Example
In this example, we will create two different instances of Tip plugin so that we can have two tooltips of different styles. We will also integrate the options, events, and methods we saw above.
Reference code:
var customTips = $$('.tooltip');
var toolTips = new Tips(customTips, {
// This will set the delay time displayed by the tooltip
showDelay: 1000, // Default is 100
// This will set the tooltip hidden delay event
hideDelay: 100, // The default is 100
// This will add a CSS style to the tooltip container div
// This will be available on a page
// There are two toolbar tips with different styles
className: 'anything', // default is null
// This will set the offset values of x and y
offsets: {
'x': 100, // The default is 16
'y': 16 // Default 16
},
// This will set whether the tooltip will follow the mouse
// Set to true will not follow the mouse
fixed: false, // default is false
// If you call this function outside the options
// and leave this function here
// It just flashes and has a smooth gradient effect
onShow: function(toolTipElement){
// Pass in tooltip object
// You can make them gradient to completely opaque
// Or make them a little transparent
(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
(0);
$('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', // default is null
});
// You can use the .store(); method to change the value of rel
// thus changing the value of the tooltip
// 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 text of the tooltip
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
('#tooltipID2');
('#tooltipID4');
('#tooltipID4');
Basic knowledge
Create a new tooltip
Creating a new tooltip is very simple. First, let's create a link to add tooltips:
Reference code:
Copy the codeThe code is as follows:
<a class="tooltipA" title="1st Tooltip Title" rel="here is the default 'text' of 1" href="">Tool tip 1</a>
MooTools 1.2 tooltips will display the values of title and rel attributes in the link by default. If there is no rel attribute, the href attribute value will be displayed.
Now let's create a new default toolbar prompt:
Reference code:
Copy the codeThe code is as follows:
var customTips = $$('.tooltipA');
var toolTips = new Tips(customTips);
Since no style is used, you will see a tooltip like this:
Tool tip 1
Use styles for your tooltips
MooTools allows you to control its output to a large extent - let's take a look at the html code of the tooltip:
Reference code:
Copy the codeThe code is as follows:
// You can specify in options
// The CSS class name of the tooltip container
<div class="">
<div class="tip"></div>
</div>
Pay attention to the divs at the top and bottom, which you can easily add rounded corners to the top and bottom, or other style effects.
Now let's create one of our first options and add some CSS. The above html code will be rendered in a CSS style called "". By specifying a CSS class name to our tooltip, we can give it a standalone style without affecting other MooTools tooltips on the page.
Reference code:
Copy the codeThe code is as follows:
var customTipsB = $$('.tooltipB');
var toolTipsB = new Tips(customTipsB, {
className: 'custom_tip'
});
Finally, let's add some more CSS:
Reference code:
Copy the codeThe code is as follows:
.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 the Tips class, each with good self-interpretation (that is, you can understand what it means at a glance).
showDelay
The default value is 100
An integer in milliseconds, which will determine how long the tooltip will be displayed after the mouse moves over the element.
hideDelay
The default value is 100
Like the showDelay above, but this value (also in milliseconds) will determine how long the mouse will hide the tooltip after it leaves the element.
className
Default is null
As you can see in the example above, this allows you to set a CSS class name for the tooltip container.
offsets
Default is x:16, y:16
This will determine the distance from the tooltip to your element, the value x is the distance from the right of the element, and y is the distance from the downwards of the element (if the fixed option is false is specified, it will be the distance from the mouse pointer, otherwise it will be the distance from the element).
fixed
Default is false
This setting determines whether this tooltip follows the mouse when your mouse moves over the element. If set to true, the tooltip will not move with the movement of the mouse pointer, but will just stay in a fixed position near the element.
event
Like the rest of this class, the tooltip events are still very simple. It has two events: onShow and onHide, which will work as you expect.
onShow
This event will be fired when the toolbar is displayed. If you set a delay, this event will be fired until the tooltip appears.
onHide
Like the onShow event above, it is relatively triggered when the tooltip is hidden. If delay is set, this event will also be triggered until the tooltip is hidden.
method
The Tips class has two methods - attach and dettach. Through these two methods, you can add a tooltip to a specified element (of course, these tooltips will have the same settings), or remove the tooltip from a specific element.
.attach();
To add a tooltip to a new element, you just need to add .attach(); after the Tip object, and finally put the selector of this element in brackets.
Reference code:
Copy the codeThe code is as follows:
('#tooltipID3');
.dettach();
This method is the same as the .attach method, but they behave in the opposite way. First, write down the Tip object, and then add .dettach() after this element; and finally put the selector of this element in brackets.
Reference code:
Copy the codeThe code is as follows:
('#tooltipID3');
Code Example
In this example, we will create two different instances of Tip plugin so that we can have two tooltips of different styles. We will also integrate the options, events, and methods we saw above.
Reference code:
Copy the codeThe code is as follows:
var customTips = $$('.tooltip');
var toolTips = new Tips(customTips, {
// This will set the delay time displayed by the tooltip
showDelay: 1000, // Default is 100
// This will set the tooltip hidden delay event
hideDelay: 100, // The default is 100
// This will add a CSS style to the tooltip container div
// This will be available on a page
// There are two toolbar tips with different styles
className: 'anything', // default is null
// This will set the offset values of x and y
offsets: {
'x': 100, // The default is 16
'y': 16 // Default 16
},
// This will set whether the tooltip will follow the mouse
// Set to true will not follow the mouse
fixed: false, // default is false
// If you call this function outside the options
// and leave this function here
// It just flashes and has a smooth gradient effect
onShow: function(toolTipElement){
// Pass in tooltip object
// You can make them gradient to completely opaque
// Or make them a little transparent
(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
(0);
$('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', // default is null
});
// You can use the .store(); method to change the value of rel
// thus changing the value of the tooltip
// 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 text of the tooltip
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
('#tooltipID2');
('#tooltipID4');
('#tooltipID4');
Tool tip 1
Tool tip is detached
Tool tip 3
Tool tip detached then attached again.
A differently styled tool tip
More learning
Read through the MooTools documentationTips section. In addition, here is a very good article written by David Walsh.Customize Mootools TipsArticles.
Download a zip compressed package with all you need