v-tooltip

v-tooltip wires hover, focus, keyboard, and touch interactions to a tooltip surface. Use it when you want directive-driven behavior on an existing trigger without manually managing open and close state.

Content

Content

Generate A Tooltip

Pass a config object with content to let the directive create and clean up a Tooltip surface for you.

<button
  v-tooltip="{
    content: 'Helpful text',
    variant: 'plain',
    placement: 'top',
    interactive: false,
  }"
>
  Hover me
</button>

Use this form for plain text tips. Generated tips use the same DOM contract and CSS as the Tooltip component. A bare string binding is treated as a target selector, not inline content.

Reuse An Existing Tooltip

Pass a selector or an element reference when the tooltip surface is already rendered, for example when you want a rich tooltip authored with the Tooltip component.

<button v-tooltip="'#save-tooltip'">Save</button>

<Tooltip id="save-tooltip" variant="rich" popover="hint">
  Save the current draft and keep editing.
</Tooltip>

Binding API

v-tooltip accepts:

• string: a selector for an existing tooltip element
• HTMLElement: an existing tooltip element
• TooltipConfig: a configuration object

Field	Type	Required	Description	Default
target	string | HTMLElement | undefined	No	Existing tooltip element to control.	-
content	string | undefined	No	Text used when the directive creates the tooltip element.	-
placement	Placement | undefined	No	Logical placement around the trigger.	top
offset	string | undefined	No	Applied through CSS translate.	0.25rem
interactive	boolean | undefined	No	Uses dialog semantics when true, tooltip semantics when false.	true
popoverType	"hint" | "auto" | "manual" | undefined	No	Popover mode of the tooltip element.	hint
openDelay	number | undefined	No	Delay before showing on hover, in milliseconds.	60
closeDelay	number | undefined	No	Delay before closing on pointer leave, in milliseconds.	80
longpressDelay	number | undefined	No	Touch long-press delay, in milliseconds.	450
triggerAria	TooltipTriggerAriaMode | undefined	No	ARIA relationship applied to the trigger.	controls
variant	"plain" | "rich" | undefined	No	Visual treatment used when the directive creates the tooltip element.	plain

Behavior Notes

• Hover and focus open the tooltip. Escape closes it.
• Touch uses a long-press interaction and suppresses the follow-up synthetic click.
• The directive repositions on scroll and resize.
• When CSS anchor positioning is unavailable, it falls back to JavaScript positioning.
• Updating the binding updates the same tooltip instance when possible.

Dynamic Content

The directive keeps its internal open state synchronized with native popover state, so a tooltip can stay usable when a mouse click changes the trigger content and tooltip text.

When an action component already exposes a title tooltip, treat that as the component's default tooltip. For dynamic or authored tooltip content, attach v-tooltip to the component and render a separate Tooltip surface instead of combining it with title.

Delete

For tooltip surface styling and authored rich content, see Tooltip.