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. Mount TooltipProvider once for that grouping. IconButton draws its own tooltip from label and shortcut.

Which overlay? A Tooltip names a control in a few words. 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

Usage

Examples

Anatomy

Customising

Accessibility

API reference

TooltipProvider3 props