Require Ink.UI.Tooltip and instantiate it. The first argument to the constructor is a selector, and the second is an object containing options.
HTML:
<ul class="buttons">
<li class="button" data-tip-text="Create a new document">New</li>
<li class="button" data-tip-text="Exit the program">Quit</li>
<li class="button" data-tip-text="Save the document you are working on">Save</li>
</ul>
JavaScript:
Ink.requireModules(['Ink.UI.Tooltip_1'], function (Tooltip) {
new Tooltip('.button', {where: 'mousefix'});
});
You can define options either through the second argument to the Tooltip constructor, or as data-attributes in each target element. Options set through data-attributes all start with data-tip
, and are prioritized over options passed into the Tooltip constructor.
Here you can see several lists where each item has options on it through data-attributes. Hover your mouse on each example to see the tooltips (applied with the above code)
You can configure the text
Several tooltip positions:
A tooltip delay is useful when you don't want the tooltip to get the user's attention unnecessarily.
Different colors
Custom templates:
A random tooltip template
< tooltip text goes here :) >
It totally works on scrolled content
Biggles: Er.... Nobody...um....
Ximinez: Expects...
Biggles: Expects... Nobody expects the...um...the Spanish...um...
Ximinez: Inquisition.
Biggles: I know, I know! Nobody expects the Spanish Inquisition.
Also within elements with margins, padding, floating, borders, and relative positioning.
You can specify whether you want it to fade in and out, and how much time (in seconds) you want it to take.
You can limit how many seconds the tooltip is shown before it disappears. (This doesn't stop it from disappearing when you move your mouse away)
And you can set them up so they don't go away when the mouse leaves the target. Instead, they fade out when the timeout (if applicable) expires, or when you hover over them. They are shy like that.
Tooltips cannot exit the screen to the side. Nor above or below.
-->Here
Here <--
-->Here
Here <--
Tooltip on the top of the screen Here