ips.ui.tooltip

Description

The Tooltip widget is designed to show a small helpful message in a balloon when certain elements are focused or hovered over. They are particularly useful used in conjunction with toolbars, to provide more information on what action a toolbar button will trigger.

Tooltip text should be succinct - never more than a few words on a single line.

Example

@todo

Usage

Generally, you only need to add the data-ipsTooltip attribute to an element to display a tooltip. By default it will use the title or aria-label attributes for the tooltip contents:

<a href='#' title='This is a tooltip' data-ipsTooltip>Hover on this link</a>

Options

label
(String; optional)

If for some reason you do not want to use the default title attribute for the tooltip contents, the contents can be specified using this option.

safe
(Boolean; optional; default false)

Specifies whether the tooltip contents are safe, i.e. whether they do not contain any user input. Important: If the tooltip contents contains any text entered by a user at some stage, this option should be false. Passing unsafe text to the tooltip opens the possibility of an XSS attack. Only set to true if you have a genuine need to and you determine the contents explicitly.

Events emitted by ips.ui.tooltip

Events are emitted by the element on which the data-ipsTooltip attribute is assigned.

tooltipShown

Emitted when the tooltip is displayed.