Mootools 1.2 Tutorial Tooltips_mootools

We'll also take a closer look at the options and events for ToolTips, as well as tools to add and remove ToolTips from elements. Finally, we'll learn how to make a page with several different styles of tooltips.
Basic knowledge
Create a new ToolTip
Creating a new ToolTip is simple. First, let's create a link to add a tooltip:
Reference code:

Copy Code code as follows:

<a class= "Tooltipa" title= "1st Tooltip title" Rel= "Here is the default ' text ' of 1" href= "http://www.consideropen.com" & Gt Tool Tip 1</a>

The MooTools 1.2 tooltip displays the value of the title and Rel properties in the link by default. If there is no Rel property, the href attribute value is displayed.
Now to create a new default toolbar hint:
Reference code:

Copy Code code as follows:

var customtips = $$ ('. Tooltipa ');
var tooltips = new Tips (customtips);

Because you don't use any style, you'll see the following tooltip:
Tool Tip 1
Use styles for your ToolTip
MooTools lets you control its output to a large extent--let's look at the ToolTip's HTML code:
Reference code:

Copy Code code as follows:

You can specify in the options
CSS class name for ToolTip container
<div class= "Options.classname" >
<div class= "Tip" ></div>
</div>

Take a look at the top and bottom div, where 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 HTML code above will be rendered with a CSS style named "Options.classname". By assigning a CSS class name to our ToolTip, we can give it a separate style without affecting other mootools tooltips on the page.
Reference code:

Copy Code code as follows:

var customtipsb = $$ ('. TOOLTIPB ');
var tooltipsb = new Tips (CUSTOMTIPSB, {
ClassName: ' Custom_tip '
});

Finally, we add some more CSS:
Reference code:

Copy Code code 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 category, each with a good sense of self explanatory (that is, to see what the meaning is).
Showdelay
The default value is 100
An integer in milliseconds, which determines how long the ToolTip will appear after the mouse is moved to the element.
Hidedelay
The default value is 100
The same as the showdelay above, but this value (also in milliseconds) determines how long the mouse hides the ToolTip when 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 determines the distance the ToolTip is from your element, the X value is the distance from the element to the right, and y is the distance from the element (if the fixed option is false, the distance will be relative to the mouse pointer, otherwise the distance will be relative to the element).
Fixed
Default 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 as the mouse pointer moves, but stays in a fixed position near the element.
Event
As with other things in this class, the ToolTip event is still very simple. It has two events: OnShow and Onhide, and they will work as you expect.
OnShow
This event will be triggered when the bar is displayed. If you set a delay, this event will be triggered until the ToolTip is displayed.
Onhide
As opposed to the OnShow event above, it is triggered when the ToolTip is hidden. If a delay is set, the event will also be triggered until the ToolTip is hidden.
Method
The Tips class has two methods--attach and Dettach, by which you can add a tooltip to a specified element (of course, the ToolTip will have the same settings), or remove the ToolTip from a particular element.
. Attach ();
To add a ToolTip to a new element, you only need to precede the tip object with the. Attach (), and then put the selector of the element in parentheses.
Reference code:

Copy Code code as follows:

Tooltips.attach (' #tooltipID3 ');

. Dettach ();
This method is the same as the. Attach method, but they behave in the exact opposite way. First, write down the Tip object, then add the Dettach () to the end of the element, and then put the selector of the element in parentheses.
Reference code:

Copy Code code as follows:

Tooltips.dettach (' #tooltipID3 ');

code example
In this example, we'll create two different tip plug-in instances so that we can have two different styles of tooltips. We will also integrate the options, events, and methods we see above.
Reference code:

Copy Code code as follows:

var customtips = $$ ('. ToolTip ');
var tooltips = new Tips (customtips, {
This sets the delay time that the ToolTip displays
showdelay:1000,//default is 100
This sets the delay event that the ToolTip hides
HIDEDELAY:100,//default is 100
This will add a CSS style to the container div for the ToolTip
So that you can do it on one page
Two different styles of ToolTips
ClassName: ' Anything ',//default is NULL
This sets the x and Y offset values
Offsets: {
' x ': 100,//default is 16
' Y ': 16//Default 16
},
This sets whether the tooltip follows the mouse
Set to True will not follow the mouse
Fixed:false,//default is False
If you call this function outside of the option
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 fade to completely opaque.
Or make them a little bit 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 use the. Store () method to change the value of the Rel
To change the value of the ToolTip
You can use the following code
$ (' tooltipID1 '). Store (' Tip:text ', ' can replace the href with whatever text for you want. ')
$ (' tooltipID1 '). Store (' Tip:title ', ' Here is a new title. ');
The following code will change the text of the ToolTip
$ (' tooltipID1 '). Set (' rel ', ' This won't change the ToolTips text ');
$ (' tooltipID1 '). Set (' title ', ' This won't 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 of the MooTools document. In addition, there is a very good article on custom MooTools Tips written by David Walsh.