JAVASCRIPT

Ink.UI.Tooltip_1

Content Tooltips

All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Tooltip class

Tooltips are useful as a means to display information about functionality while avoiding clutter.

Tooltips show up when you hover elements which "have" tooltips.

This class will "give" a tooltip to many elements, selected by its first argument (target). This is contrary to the other UI modules in Ink, which are created once per element.

You can define options either through the second argument of the Tooltip constructor, or as data-attributes in each target element. Options set through data-attributes all start with "data-tip", and override options passed into the Tooltip constructor.

Methods
Method name Description
new Tooltip(target, [options]) Constructor
.destroy() Destroys the tooltips created by this instance

new Ink.UI.Tooltip(target, [options])

Accepts

  • target

    Target element or selector of elements, to display the tooltips on.

  • options

    Options object

  • options.text

    Text content for the tooltip.

  • options.html

    HTML for the tooltip. Same as above, but won't escape HTML.

  • options.where

    Positioning for the tooltip. Options are 'up', 'down', 'left', 'right', 'mousemove' (follows the cursor), and 'mousefix' (stays fixed). Defaults to 'up'.

  • options.color

    Color of the tooltip. Options are red, orange, blue, green and black. Default is white.

  • options.fade

    Number of seconds to fade in/out. Defaults to 0.3.

  • options.forever

    Flag to prevent the tooltip from being erased when the mouse hovers away from the target.

  • options.timeout

    Number of seconds the tooltip will stay open. Useful together with options.forever. Defaults to 0.

  • options.delay

    Time the tooltip waits until it is displayed. Useful to avoid getting the attention of the user unnecessarily

  • options.template

    Element or selector containing HTML to be cloned into the tooltips. Can be a hidden element, because CSS `display` is set to `block`.

  • options.templatefield

    Selector within the template element to choose where the text is inserted into the tooltip. Useful when a wrapper DIV is required.

  • options.left

    Spacing from the target to the tooltip, when `where` is `mousemove` or `mousefix`. Defaults to 10.

  • options.top

    Spacing from the target to the tooltip, when `where` is `mousemove` or `mousefix`. Defaults to 10.

  • options.spacing

    Spacing between the tooltip and the target element, when `where` is not `mousemove` or `mousefix`. Defaults to 8.

Demo

Code

<div id="myTips" class="ink-navigation">
    <ul class="pills black">
        <li class="ink-tooltip" data-tip-text="Hello world!"><a href="#">Default Behavior</a></li>
        <li class="ink-tooltip" data-tip-text="Hello world!" data-tip-where="up" data-tip-color="blue"><a href="#">Up</a></li>
        <li class="ink-tooltip" data-tip-text="Hello world!" data-tip-where="right" data-tip-color="green"><a href="#">Right</a></li>
        <li class="ink-tooltip" data-tip-text="Hello world!" data-tip-where="down" data-tip-color="orange"><a href="#">Down</a></li>
        <li class="ink-tooltip" data-tip-text="Hello world!" data-tip-where="left" data-tip-color="red"><a href="#">Left</a></li>
        <li class="ink-tooltip" data-tip-text="Hello world!" data-tip-where="mousemove" data-tip-color="black"><a href="#">Mousemove</a></li>
        <li class="ink-tooltip" data-tip-text="Hello world!" data-tip-where="mousefix" data-tip-color="grey"><a href="#">Mousefix</a></li>
    </ul>
</div>

<script>
// You don't need this if you have autoload.js
Ink.requireModules( ['Ink.UI.Tooltip_1'], function( Tooltip ){
    var Tooltip = new Tooltip( '#myTips .ink-tooltip');
});
</script>

As shown in the example above, you may change the tooltip theme and position by using the data-tip-color and data-tip-where attributes respectively.

.destroy() method

Destroys the tooltips created by this instance