Today, let's take a look at the Tooltip plug-in bound to MooTools. With the "tip (Tips)", you can easily customize a tooltip containing a title and content. You can customize styles and customize fade-in and fade-out effects. We will also take a closer look at the options and events of tooltip, as well as some tools for adding and removing tooltip from elements. Finally, we will learn how to make a page have multiple tooltip with different styles.
Basic knowledge
Create a new tooltip
The prompt for creating a new tool is very simple. First, create a link to add a tooltip:
Reference code:
The Code is as follows:
Tool tip 1
The MooTools 1.2 tooltip displays the title and rel attribute values in the link by default. If no rel attribute exists, the href attribute value is displayed.
Now you are prompted to create a new default toolbar:
Reference code:
The Code is as follows:
Var customTips =$ $ ('. tooltipa ');
Var toolTips = new Tips (customTips );
Since no style is used, you will see the following tool prompt:
Tool tip 1
Use styles for your tooltip
MooTools allows you to control its output to a large extent-let's take a look at the html code prompted by the tool:
Reference code:
The Code is as follows:
// You can specify
// The CSS Class Name Of The tooltip container
Pay attention to the p at the top and bottom. You can use them to easily add rounded corners or other style effects to the top and bottom.
Now, let's create a first option and add some CSS. The preceding html code is rendered using the CSS style "options. className. By specifying a CSS class name for our tooltip, we can give it an independent style without affecting other MooTools tooltip on the page.
Reference code:
The Code is as follows:
Var customTipsB =$ $ ('. tooltipb ');
Var toolTipsB = new Tips (customTipsB ,{
ClassName: 'custom_tip'
});
Finally, we can add some CSS:
Reference 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
Option
There are only five options in the Tips class, each of which has a good self-explanatory meaning (that is, what it means at a Glance ).
ShowDelay
The default value is 100.
An integer in milliseconds, which determines how long the tooltip will be displayed after you move the cursor over the element.
HideDelay
The default value is 100.
Like showDelay above, however, this value (in milliseconds) will determine how long the tooltip will be hidden after the mouse leaves the element.
ClassName
The default value is null.
As you can see in the preceding example, this allows you to set a CSS class name for the tooltip container.
Offsets
The default value is x: 16, y: 16.
This determines the distance between the tooltip and your element. The x value is the distance from the element to the right, and the y value is the distance from the element to the down (if the fixed option is specified as false, it will be the distance relative to the mouse pointer, otherwise it will be the distance relative to the element ).
Fixed
The default value is false.
This setting determines whether to follow the mouse when your mouse moves over the element. If it is set to true, The tooltip will not move with the mouse pointer, but will only stay near the fixed position of the element.
Event
Like other things in this class, the event prompted by the tool is still very simple. It has two events: onShow and onHide, which will work as expected.
OnShow
This event is triggered when the toolbar is displayed. If you set the latency, this event will be triggered when the tooltip is displayed.
OnHide
Like the onShow event above, it is triggered when the tooltip is hidden. If latency is set, this event is triggered when the tooltip is hidden.
Method
The Tips class has two methods: attach and dettach. With these two methods, you can add a tooltip to a specified Element (of course, these tooltip 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 then put the selector of this element in brackets.
Reference code:
The Code is as follows:
ToolTips. attach ('# tooltipID3 ');
. Dettach ();
This method is the same as the. attach method, but they do the opposite. First, write down the Tip object, Add. dettach () next to this element, and put the selector of this element in brackets.
Reference code:
The Code is as follows:
ToolTips. dettach ('# tooltipID3 ');
Sample Code
In this example, we will create two different Tip plug-in instances, so that we can have two different style tool prompts. We will also integrate the options, events, and methods we see above.
Reference code:
The Code is as follows:
Var customTips =$ $ ('. tooltip ');
Var toolTips = new Tips (customTips ,{
// This sets the delay time displayed by the tooltip.
ShowDelay: 1000, // The default value is 100.
// This sets a tooltip for hidden latency events
HideDelay: 100, // The default value is 100.
// This will add a CSS style to the tooltip container p.
// In this way, you can go to a page
// There are two toolbar prompts with different styles
ClassName: 'Anything ', // The default value is null.
// This sets the offset values of x and y.
Offsets :{
'X': 100, // The default value is 16.
'Y': 16 // The default value is 16.
},
// This will set the tool prompt whether to follow the mouse
// If it is set to true, the mouse will not be followed
Fixed: false, // The default value is false.
// If you call this function outside of the options
// And leave this function here
// It just flashes and has a smooth gradient effect
OnShow: function (toolTipElement ){
// Passed in tooltip object
// You can make them gradient to completely 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 value is null.
});
// You can use. store (); to change the rel value.
// Change the value of the tooltip
// You can use the following code
$ ('Tooltid1'). store ('tip: text', 'you can replace the href with whatever text You want .');
$ ('Tooltid1'). store ('tip: title', 'Here is a new title .');
// The following code will not change the text prompted by the tool
$ ('Tooltid1'). set ('rel ', 'this will not change the tooltips text ');
$ ('Tooltid1'). set ('title', 'this will not change the tooltids ');
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 the Tips section in the MooTools document. In addition, there is also a good article about customizing Mootools Tips written by David Walsh.
Download a zip package containing all the things you need
