Tooltip

Proposed

A short label on hover and on focus. Ink on white, 11.5px, never more than a line or two, never the only way to learn something.

@varick/ui/components/tooltipAdded 2 Sept 2026

Usage

import { Tooltip } from "@varick/ui/components/tooltip";

export function Example() {
  return (
    <Tooltip content="Pause agent">
      <IconButton label="Pause agent"><PauseIcon /></IconButton>
    </Tooltip>
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
content	ReactNode	required	The text. Keep it to a few words.
side	'top' \| 'bottom'	'top'	Where it appears.
children	ReactElement	required	One focusable element. It gets aria-describedby.

Accessibility

Shows on hover and on keyboard focus, with no delay and no timers.
role="tooltip" linked by aria-describedby. It supplements the label; it never replaces an aria-label.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  margin-bottom: 6px;
  padding: 4px 8px;
  background: var(--fg-high);
  color: #FFFFFF;
  border-radius: 4px;
  font-size: 11.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.tip:hover .tooltip, .tip:focus-within .tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }