Tooltip - demo

How to use

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'});
});

Options

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.

Demos

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

• data-tip-text="something"
• data-tip-html="some<br>thing"

Several tooltip positions:

• data-tip-where="up" [default]
• data-tip-where="down"
• data-tip-where="left"
• data-tip-where="right"
• data-tip-where="mousemove"
• data-tip-where="mousefix"

A tooltip delay is useful when you don't want the tooltip to get the user's attention unnecessarily.

• data-tip-delay="0" [default]
• data-tip-delay="1"
• data-tip-delay="2.5"

Different colors

• [no color defined] [default]
• data-tip-color="red"
• data-tip-color="orange"
• data-tip-color="blue"
• data-tip-color="green"
• data-tip-color="black"

Custom templates:

• data-tip-template="#tooltip-template" data-tip-templatefield="span" data-tip-text="Something I wish to write in that span"

It totally works on scrolled content

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.

• data-tip-fade="0"
• data-tip-fade="0.3" [default]
• data-tip-fade="0.5"
• data-tip-fade="1"
• data-tip-fade="10"

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)

• data-tip-timeout="0" [default] (stays forever)
• data-tip-timeout="2"
• data-tip-timeout="5.1"

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.

• data-tip-forever="0" [default]
• data-tip-forever="1" data-tip-timeout="3.5"

Tooltips cannot exit the screen to the side. Nor above or below.

-->Here

Here <--

-->Here

Here <--

Tooltip on the top of the screen Here