Tooltip

A small dark label that appears beside a control on hover or keyboard focus, after a short wait.

ui.tooltipcomponents/ui/tooltip.tsx

Use case

For the AI

Use it to name an icon-only button (Archive, Copy the Link, Bold) or to teach its keyboard shortcut, in toolbars, table row actions and dense headers. Mount `TooltipProvider` once near the root with a `delay` (the library's pages use 400): the first tooltip waits, and the next ones along the same row open at once.

Use it when

An icon-only button needs its name on hover
A shortcut is worth teaching beside its action
A row of tool buttons where written names would crowd the bar

Use something else when

The words are needed to do the task, or hold a link or a button: Popover
A preview of a person or a record behind a link: Preview card
Something every person must read: Alert

Examples

Waits a moment, then opens instantly from one to the next

Code

Import

import { ArchiveIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

Usage

<TooltipProvider delay={400}>
  <Tooltip>
    <TooltipTrigger render={<Button variant="ghost" size="icon" aria-label="Archive" />}>
      <ArchiveIcon />
    </TooltipTrigger>
    <TooltipPopup>
      Archive <span className="opacity-60">⌘E</span>
    </TooltipPopup>
  </Tooltip>
</TooltipProvider>

Rules

A tooltip never holds the only way to read something: touch screens have no hover, so an icon button still carries its `aria-label`.
A few words in sentence case; a shortcut may follow in a dimmer span (`opacity-60`).
The trigger is the control itself, through `render={<Button />}`, never a wrapper around it.
`TooltipProvider` is mounted once, so neighbouring tooltips share one delay.