Tooltip & Popover

Preview

Tooltips name or explain a control on hover and focus; popovers hold interactive content anchored to a trigger.

<Tooltip content="Copy link">
  <IconButton icon={<IconCopy />} label="Copy link" size="sm" />
</Tooltip>

<Popover
  title="Anomaly on Sep 5"
  trigger={<Button size="sm" variant="signal">Sep 5 anomaly</Button>}
  actions={({ close }) => (
    <>
      <PopoverAction variant="signal" onClick={() => { annotate(); close(); }}>Annotate</PopoverAction>
      <PopoverAction onClick={close}>Dismiss</PopoverAction>
    </>
  )}
>
  Revenue was 38% above the forecast band.
</Popover>

Usage

Tooltip wraps one focusable element and shows after a 400 ms hover delay, or immediately on keyboard focus. Popover toggles on click; children and actions can be functions of { close }.

Props

Tooltip

PropTypeDefaultDescription

contentrequiredReactNode——

childrenrequiredReactElement—One focusable element (a button, a link). Receives a ref, pointer and focus handlers.

delaynumber400Hover delay before showing, ms (default 400). Keyboard focus shows immediately.

openboolean——

defaultOpenbooleanfalse—

onOpenChange(open: boolean) => void——

disabledboolean——

arrowbooleantrueArrow under the panel (default true).

classNamestring——

Popover

PropTypeDefaultDescription

triggerrequiredReactElement—The element that toggles the popover. Receives a ref and ARIA attributes.

titleReactNode——

childrenReactNode | ((api: PopoverApi) => ReactNode)——

actionsReactNode | ((api: PopoverApi) => ReactNode)——

openboolean——

defaultOpenbooleanfalse—

onOpenChange(open: boolean) => void——

labelstring—Accessible name when there is no title.

widthnumber | string—Panel width (default: fits content, up to 320px).