Tooltip

Since: 1.4.0

Usage

PreviewAngularReactVueJavascript

Properties

Props

Name

Description and specifications

for

CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`

Attribute:

for

Type:

HTMLElement ｜ Promise<HTMLElement> ｜ string

interactive

Define if the user can access the tooltip via mouse.

Attribute:

interactive

Type:

boolean

Default:

false

placement

Since 1.5.0

Initial placement of the tooltip. If the placement don"t have enough space, the tooltip will placed on another location.

Attribute:

placement

Type:

"bottom" ｜ "left" ｜ "right" ｜ "top"

Default:

'top'

titleContent

Title of the tooltip

Attribute:

title-content

Type:

string

Slots

Name

Description and specifications

title-content

Content of tooltip title

title-icon

Icon of tooltip title

A11y

Set the aria-describedby attribute on the trigger element to the tooltip id attribute. This allows assistive technologies to establish a logical connection between the trigger and the tooltip.

See examples above.

More information