docs_vue2/one/docs/en-US/components/tooltip.md

Tooltip

Demos

Style variants

Available style variant for the ui prop: alt.

Position

Use the position prop to specify the placement of the tooltip.

Triggers

Use the trigger prop to specify when to show/hide the tooltip.

API

Props

Name	Type	Default	Description
ui	string=	-	[^ui]
open	boolean	false	[^open]
target	`string	Vue	Node`
position	string	'top'	[^position]
aim-center	boolean	false	Whether the tooltip arrow always points to the center of the target element.
trigger	string	'hover'	[^trigger]
interactive	boolean	true	Whether the tooltip content is interactive. When set to false, the tooltip will be automatically hidden after the event specified by trigger is triggered outside the target.
hide-delay	number	tooltip.hideDelays	Time (in milliseconds) to wait before hiding the tooltip after the close trigger is triggered. Can be used to prevent the tooltip being immediately closed after pointer leaves the target element and before it enters the tooltip itself.
overlay-class	`string	Array	Object=`
overlay-style	`string	Array	Object=`

^^^ui Style variants.

+++Enum values

Value	Description
alt	Reverse style.
s	Small style.
m	Medium style.
+++
^^^

^^^open :::badges .sync :::

Whether the tooltip is displayed. ^^^

^^^position Denotes the target element of the tooltip. Used with Popper.js-style placement syntax, see Popper.placements. ^^^

^^^trigger The event that triggers the toggle of the tooltip. Can take valid values for v-outside directive's trigger parameter, and can use `${open}-${close}` syntax to specify different trigger event for showing/hiding the tooltip. When specified as custom, v-outside will not be leveraged to automatically toggle the tooltip.

eg. click denotes showing the tooltip after clicking the target and hiding it after clicking outside. hover-mousedown denotes showing the tooltip after hovering the target, and hiding it after clicking outside. ^^^

Slots

Name	Description
default	The content of the tooltip.

Global config

Key	Type	Default	Description
tooltip.hideDelay	number	300	See the hide-delay prop.