Overlay

Tooltip

Hover- or focus-triggered short label. Smaller than Popover and non-interactive — content shouldn't accept clicks. Use for icon-button labels and abbreviation hints.

Examples

Default (top)

<Tooltip content="Search · ⌘K">
  {#snippet trigger(props)}
    <Button icon aria-label="Search" {...props}>⌕</Button>
  {/snippet}
</Tooltip>

side="right"

<Tooltip content="Saved 4 minutes ago" side="right">
  {#snippet trigger(props)}
    <Button variant="ghost" size="sm" {...props}>Saved</Button>
  {/snippet}
</Tooltip>

Custom delay

<Tooltip content="Shows immediately" delayDuration={0}>
  {#snippet trigger(props)}
    <Button variant="outline" {...props}>Instant</Button>
  {/snippet}
</Tooltip>

Props

Prop	Type	Default	Description
`content`	`string`	`—`	Tooltip text. Keep to one line ideally.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	Edge of the trigger to anchor.
`sideOffset`	`number`	`6`	Gap (px) between trigger and tooltip.
`delayDuration`	`number`	`250`	How long the trigger must be hovered before showing.
`trigger`	`Snippet<[TriggerProps]>`	`—`	Snippet receiving bits-ui props. Spread them onto your own element so it (not a wrapper) is the actual trigger.

Install

CLI

npm install bits-ui
npx @a3tai/mittsu add tooltip