Tooltip

A small label that appears near an element on hover or focus. Use to provide supplementary information for UI elements that lack a visible text label.

ExamplesCodeUsageChangelog

Basic

This is a tooltip

Tailwind v4

<Tooltip content="This is a tooltip">
  <Button variant="secondary">Hover me</Button>
</Tooltip>

Placements

Top tooltipBottom tooltipLeft tooltipRight tooltip

Tailwind v4

<Tooltip content="Top tooltip" placement="top">
  <Button>Top</Button>
</Tooltip>
<Tooltip content="Right tooltip" placement="right">
  <Button>Right</Button>
</Tooltip>
<Tooltip content="Bottom tooltip" placement="bottom">
  <Button>Bottom</Button>
</Tooltip>
<Tooltip content="Left tooltip" placement="left">
  <Button>Left</Button>
</Tooltip>

On icon button

EditDelete

Tailwind v4

<Tooltip content="Edit">
  <IconButton label="Edit">
    <PencilIcon />
  </IconButton>
</Tooltip>

Disabled

This won't show

Tailwind v4

<Tooltip content="This won't show" :disabled="true">
  <Button>...</Button>
</Tooltip>

With aria-describedby

Use the scoped slot to wire aria-describedby on the trigger — required for strict ARIA compliance.

Saves your current work

Tailwind v4

<Tooltip content="Saves your current work" v-slot="{ tooltipId }">
  <Button :aria-describedby="tooltipId">Save</Button>
</Tooltip>

Hide delay

Use hideDelay to keep the tooltip visible briefly after the pointer leaves — useful when the tooltip content itself might need to be re-entered, or just to reduce flicker on quick mouse-outs.

Lingers for 500ms after you leave

Tailwind v4

<Tooltip content="Lingers for 500ms after you leave" :hide-delay="500">
  <Button>Slow to dismiss</Button>
</Tooltip>

Focus trigger

Use focus-trigger="never" to disable keyboard-focus activation entirely, so the tooltip only appears on hover (e.g. for purely decorative supplementary hints that shouldn't interrupt keyboard navigation).

Only shows on hover

Tailwind v4

<Tooltip content="Only shows on hover" focus-trigger="never">
  <Button>Hover only</Button>
</Tooltip>

Props

Prop	Type	Default	Description
content	string	—	Tooltip text
placement	'top' | 'right' | 'bottom' | 'left'	'top'	Where the tooltip appears
delay	number	300	Milliseconds before showing
hideDelay	number	0	Milliseconds before hiding, independent of delay. Re-entering the trigger before this timer fires cancels the hide
disabled	boolean	false	Prevent tooltip from showing
focusTrigger	'auto' | 'always' | 'never'	'auto'	Controls keyboard-focus activation. 'auto' shows on focus same as hover, 'always' forces focus-triggered display, 'never' disables the focusin/focusout listeners entirely so the tooltip only shows on hover
anchorRef	HTMLElement | null	undefined	Positions the tooltip relative to this element instead of the wrapper span — useful when the trigger and the visual anchor point differ (e.g. a small icon inside a larger clickable row). Implemented with position: fixed computed from the anchor's bounding rect, recalculated on show and on window resize/scroll. It does not track the anchor on every animation frame, so it can drift out of sync during CSS transitions or scrolling inside a container that doesn't bubble a scroll event to window

Slots

Slot	Slot props	Description
default	tooltipId: string	Trigger content. Use tooltipId to wire aria-describedby on the interactive element.