components

Tooltip

Tooltips surface supplementary, non-essential information. Anything the user must read to complete a task belongs on the surface itself.

Read the full spec

On a button

The canonical use: a tooltip that explains an icon-only button. The tooltip shows on hover and on keyboard focus.

tsx

<Tooltip>
  <TooltipTrigger asChild>
    <Button size="icon" aria-label="Add item">
      <Plus />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Add an item</TooltipContent>
</Tooltip>

Sides

Anchor the tooltip to any side of the trigger. Default is `top`.

tsx

<TooltipContent side="right">…</TooltipContent>

On plain text

Wrap a `span` to explain an abbreviation or a metric. Keep the copy short — tooltips never scroll.

Your response time was P95 142 ms.