Tooltip

Try it

import { IconButton, Tooltip } from "@arcadia/ui";

<div {...sx("cmp-toolbar", cmp.toolbar)}>
  <Tooltip content="Copy message" shortcut="mod+c">
    <IconButton icon="copy" label="Copy" tone="muted" tooltip={false} />
  </Tooltip>
  <Tooltip content="Restore checkpoint" subtitle="Files go back to this point">
    <IconButton icon="revert" label="Restore" tone="muted" tooltip={false} />
  </Tooltip>
  <Tooltip content="Stop" shortcut="Esc">
    <IconButton icon="stop" label="Stop" variant="inverse" shape="pill" tooltip={false} />
  </Tooltip>
</div>

TSX

import { Button, Tooltip } from "@arcadia/ui";

<Tooltip content="Open in editor" shortcut="mod+o">
  <Button iconEnd="external">Editor</Button>
</Tooltip>

A hint, never a label and never interactive: icon-only controls carry their own aria-label. It opens after 350ms and closes after 100ms; once one has shown, its neighbours open instantly for 200ms, so reading along a toolbar doesn't wait at every button. Its own motion is the quickest step of the overlay scale: 90ms in, 70ms out. Mount TooltipProvider once for that grouping. IconButton draws its own tooltip from label and shortcut.

Which overlay? A Tooltip names a control or a target in a few words: a name, a path, a one-line summary. A Hover Card previews what a link points to, a Popover holds content you act on, and a Menu lists actions or choices.

Examples

Anatomy

A title, a shortcut (glyph shortcuts as key caps, words as text), an optional subtitle, on any side. Rendered open in place.

Top, the default: a title and glyph keys

Right: a subtitle on a second line

Bottom: a word shortcut as text

Left: a status and its detail

Length

A few words, four lines at most. Past them the last line fades, never dots, and a development build warns in the console.

Try it

import { Button, Tooltip } from "@arcadia/ui";

<Tooltip content={PROMPT} lines={2}>
  <Button variant="ghost">Started judge</Button>
</Tooltip>

It never grows past the room it has: it flips to the side with more space, slides along its edge, and keeps fewer whole lines when the window is short. Long text is never a hover. Put a prompt, a message or a list in the trigger's own detail (an opened row) or a Popover, and let the tooltip name it or show its first line with lines.

rootStyle takes where the tooltip's popup sits and its widest width.

--tooltip-max-w: TokenRef<Measure>Default 280px; Widest width (280); longer titles wrap.

It shows on keyboard focus as well as hover and describes its trigger; the trigger's own name stays its label. It holds no focusable content, so anything a person must read at leisure or click belongs in a Popover.

Esc: Hides the tooltip

contentrequired: ReactNode; The title line. null/false renders the trigger alone (no tooltip).
shortcut: ShortcutSpec; Right-aligned shortcut: glyph shortcuts (⌘⇧⌥⌃) render as boxed keys, words as text-3.
subtitle: ReactNode; A second line, 12/16 text-2.
lines: number; Fewer lines, for the start of a text shown whole elsewhere.
side: "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end"Default "top"; one in a list row (not its actions) sits beside the row.
align: "start" | "center" | "end"Default "center"
sideOffset: numberDefault 6
delay: number; Open delay in ms. Default: the provider's, or 350 without one.
closeDelay: number
disabled: boolean
open: boolean
defaultOpen: boolean
onOpenChange: (open: boolean) => void
container: PortalContainerDefault document.body; Portal container.
rootStyle: RootStyle<TooltipKnobs>; Typed StyleX override for the popup: layout and --tooltip-max-w.
className: string; A product's hook class for the popup (being retired: new code sets rootStyle).
childrenrequired: ReactElement; The trigger: one element that accepts props and a ref (a Button, an IconButton, a row).

delay: numberDefault 350
closeDelay: numberDefault 100
timeout: numberDefault 200

Usage

Examples

Anatomy

Length

Customising

Accessibility

API reference

TooltipProvider 3 props