Tooltip

Basic usage

Negative mode

The Tooltip directive supports a negative mode, suitable for areas with dark background.

Activation status

You can easily control the activation status of a Tooltip. When it is not active, it won’t be displayed on hover/focus of its host element.

Position

You can choose whether to display a Tooltip above, below, before or after its host element.

Custom trigger reference

The Tooltip directive allows you to specify another custom trigger element, rather than its host.

Showing a tooltip on content truncation

The Tooltip directive supports a mode that makes a given Tooltip be displayed only when the text content of its host element is truncated via CSS. The calculation is automatically performed by the directive.

Showing a tooltip on content truncation - Custom content reference

When displaying a Tooltip on content truncation (see previous example), you may want the Tooltip directive to perform the calculations on - and to display the text content of - another element, rather than its host. The Tooltip directive allows you to control this effortlessly.

Tooltip on host element only

You can configure the Tooltip to be displayed only when hovering or focusing its host element only, and be hidden when hovering or focusing any other interactive descendants of the host element.