Tooltip v-tooltip ​

Tooltips display informative text when users hover over, focus on, or tap an element. Elements uses Floating UI for tooltips.

The tooltip directive allows you to easily add a tooltip to any element.

Syntax ​

The directive can be used in two ways. The first way is to pass a string to the directive. This string will be used as the tooltip text. In this case the tooltip uses the props inherited from the global configuration.

v-tooltip="'My tooltip text'"

v-tooltip="'My tooltip text'"

The second way is to pass an object to the directive. This object should contain a text property with the tooltip text. The object can also contain any of the tooltip props.

v-tooltip="{ text: 'My tooltip text', placement: 'right', delay: 1000 }"

v-tooltip="{ text: 'My tooltip text', placement: 'right', delay: 1000 }"

Reactivity ​

All directive arguments are reactive.