All samples are using
Ink.requireModules, please read how to use it at Ink.requireModules section
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.
|new Tooltip(target, [options])||Constructor|
|.destroy()||Destroys the tooltips created by this instance|
targetTarget element or selector of elements, to display the tooltips on.
options.textText content for the tooltip.
options.htmlHTML for the tooltip. Same as above, but won't escape HTML.
options.wherePositioning for the tooltip. Options are 'up', 'down', 'left', 'right', 'mousemove' (follows the cursor), and 'mousefix' (stays fixed). Defaults to 'up'.
options.colorColor of the tooltip. Options are red, orange, blue, green and black. Default is white.
options.fadeNumber of seconds to fade in/out. Defaults to 0.3.
options.foreverFlag to prevent the tooltip from being erased when the mouse hovers away from the target.
options.timeoutNumber of seconds the tooltip will stay open. Useful together with options.forever. Defaults to 0.
options.delayTime the tooltip waits until it is displayed. Useful to avoid getting the attention of the user unnecessarily
options.templateElement or selector containing HTML to be cloned into the tooltips. Can be a hidden element, because CSS `display` is set to `block`.
options.templatefieldSelector within the template element to choose where the text is inserted into the tooltip. Useful when a wrapper DIV is required.
options.leftSpacing from the target to the tooltip, when `where` is `mousemove` or `mousefix`. Defaults to 10.
options.topSpacing from the target to the tooltip, when `where` is `mousemove` or `mousefix`. Defaults to 10.
options.spacingSpacing between the tooltip and the target element, when `where` is not `mousemove` or `mousefix`. Defaults to 8.
As shown in the example above, you may change the tooltip theme and position by using the
data-tip-where attributes respectively.
Destroys the tooltips created by this instance