Tooltip

A short label shown on hover or keyboard focus. The trigger snippet receives the descriptor props, so the bubble is announced as a description rather than a mystery.

Examples

Top

Show code

<Tooltip label="Copy to clipboard">
  {#snippet trigger(attrs)}
    <Button {...attrs} variant="outline">Copy</Button>
  {/snippet}
</Tooltip>

Bottom

Show code

<Tooltip label="Shown below" placement="bottom">
  {#snippet trigger(attrs)}
    <Button {...attrs} variant="ghost">Below</Button>
  {/snippet}
</Tooltip>

Props

Prop	Type	Default	Description
`label`	`string`	`—`	The tooltip text.
`placement`	`"top" \| "bottom"`	`"top"`	Which side of the trigger the bubble sits on.
`trigger`	`Snippet<[{ aria-describedby: string }]>`	`—`	Renders the trigger. Spread the props onto the focusable element so it names the tooltip.

Use a tooltip only for short, supplementary text — not for information the user needs to complete a task. The bubble is pointer-events: none, so it never traps the pointer. It is absolutely positioned, so avoid placing a tooltip inside an overflow: hidden container.