MooTools Tooltips in MooTools

What is MooTools Tooltips?

MooTools gives different tooltips to layout custom styles and effects. On this chapter, we will learn the numerous alternatives and events of tooltips, as well as a few tools that will help you add or eliminate tooltips from factors.

Creating a new Tooltip

Creating a tooltip is quite simple. First, we should create the detail where we will attach the tooltip. Let us take an example that creates an anchor tag and adds that to the tips class in the constructor. Check the following code.

Take a look at the code used to create tooltip.

Example

The following example explains the basic idea of Tooltips. Take a look at the following code.

You will receive the following output −

Output

Tooltips

Tooltip Options

There are only five options in Tips and they are all pretty self-explanatory.

showDelay

An integer measured in milliseconds, this will determine the delay before the tooltip shows once the user mouse onto the element. The default is set at 100.

hideDelay

Just like showDelay above, this integer (also measured in milliseconds) determines how long to wait before hiding the tip once the user leaves the element. The default is set at 100.

className

This lets you set a class name for the tooltip wrap. The default is set to Null.

Offset

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 is relative to the original element). Default is x: 16, y: 16

Fixed

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 default is set to false.

Tooltip Events

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.

onShow()

This event executes when the tooltip appears. If you set a delay, this event will not execute until the delay is up.

onHide()

The tooltip hides with the execution of this event. If there is a delay, this event will not execute until the delay is up.

Tooltip Methods

There are two methods for tooltips — 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.

attach()

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 the brackets ().

Syntax

dettach()

This method works just as the .attach method, but the outcome is completely the opposite. First, state the tip object, then add .dettach(), and finally place your element selector within ().

Syntax

Example

Let us take an example that explains tooltip. Take a look at the following code.

You will receive the following output −

Output

Tool tips 1


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

MooTools Topics