Mootools 1.2教程 Tooltips_Mootools

We'll also take a closer look at tooltip options and events, as well as some tools for adding and removing tooltips from elements. Finally, we will learn how to have multiple tooltips in different styles on one page.
The Basics
Creating a new tooltip
Creating a new tooltip is easy. First, let’s create a link to which we want to add a tooltip:
Reference code:

Copy the code The code is as follows:

Tool tip 1< ;/a>

MooTools 1.2 tooltips will display the values ​​of the title and rel attributes in links by default. If there is no rel attribute, the href attribute value will be displayed.
Now create a new default toolbar tip:
Reference code:

Copy code The code is as follows:

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

Since no styles are used, you will see to a tooltip like this:
Tool tip 1
Use styles for your tooltips
MooTools gives you a lot of control over its output - let’s take a look at the html code for the tooltip :
Reference code:

Copy code The code is as follows:

// You can Specify
in options >

Pay attention to the top and bottom divs. You can use them to easily add rounded corners or other styling effects to the top and bottom.
Now, let’s create our first option and add some CSS. The above html code will be rendered with a CSS style named "options.className". By giving our tooltip a CSS class name, we can give it an independent style without affecting other MooTools tooltips on the page. Reference code:

Copy code The code is as follows: var customTipsB = $$( '.tooltipB');

var toolTipsB = new Tips(customTipsB, {

className: 'custom_tip'
});


Finally, we add some more CSS:
Reference code:

Copy code The 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 total in the Tips category, each of which is very self-explanatory (that is, you can understand what it means at a glance).
showDelay
The default value is 100
An integer in milliseconds that will determine how long the tooltip will wait after the mouse is moved over the element.
hideDelay
The default value is 100
Same as showDelay above, but this value (also in milliseconds) will determine how long it takes to hide the tooltip when the mouse leaves the element.
className
Defaults to null
As you can see in the example above, this allows you to set a CSS class name for the tooltip container.
offsets
The default is x:16, y:16
This will determine the distance of the tooltip from your element, the x value is the distance to the right of the element, and the y value is the distance from the element down ( If the fixed option is specified as false, the distance will be relative to the mouse pointer, otherwise it will be the distance relative to the element).
fixed
Defaults to false
This setting determines whether the 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 at a fixed position near the element.
Events
Like everything else in this class, tooltip events are still very simple. It has two events: onShow and onHide, which will work as you expect.
onShow
This event will be triggered when the toolbar is displayed. If you set a delay, this event will fire until the tooltip is displayed.
onHide
is the same as the onShow event above, but it is triggered when the tool tip is hidden. If a delay is set, this event will also fire until the tooltip is hidden.
Methods
The Tips class has two methods - attach and detach. Through these two methods, you can add a tool tip to a specified element (of course, these tool tips will have the same settings), Or remove the tooltip from a specific element.
.attach();
To add a tooltip to a new element, you only need to add .attach(); after the Tip object, and finally put the selector of this element in parentheses .
Reference code:

Copy code The code is as follows:

toolTips.attach('# tooltipID3');

.dettach();
This method is the same as the .attach method, but their behavior is completely opposite. First, write the Tip object, then add .dettach(); after the element, and finally put the selector of this element in parentheses.
Reference code:

Copy code The code is as follows:

toolTips.dettach('# tooltipID3');

Code Example
In this example, we will create two different instances of the Tip plugin so that we can have two different styles of tooltips. We will also integrate the options, events and methods we saw above.
Reference code:

Copy code The code is as follows:

var customTips = $$('.tooltip');
var toolTips = new Tips(customTips, {
// This will set the delay time for tooltip display
showDelay: 1000 , // The default is 100
// This will set the delay event for tooltip hiding
hideDelay: 100, // The default is 100
// This will add a CSS style to the tooltip's container div
// This way you can have two different styles of toolbar tips on one page
//
className: 'anything', // The default is null
// This will set x and y Offset values ​​for
offsets: {
'x': 100, // Default is 16
'y': 16 // Default is 16
},
// This will set the tool Prompt whether to follow the mouse
// Set to true and the mouse will not be followed
fixed: false, // The default is false
// If you call this function outside the options
// and put This function stays here
// It flashes and has a smooth gradient effect
onShow: function(toolTipElement){
// Pass in the tooltip object
// You can make them Fade to fully opaque
// Or make 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', // The default is null
});
// You can use the .store(); method to change rel The value of
// thereby changing the value of the tool tip
// 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 tool tip The text of
$('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

Learn more

Read through the Tips section in the MooTools documentation. In addition, here is a very good article written by David Walsh about Customizing Mootools Tips.

Download a zip package containing everything you need