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>

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
disabled	boolean	false	Prevent tooltip from showing

Slots

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