Tooltip
A short hint on hover or focus. For explaining a control, never for content the user needs — a tooltip is unreachable on a touch screen.
import Tooltip from '@/components/ui/Tooltip';Source: src/components/ui/Tooltip.tsx
Examples
Positions
top
bottom
left
right
Variants
primary
secondary + shadow
Hover trigger (HoverTooltip)
Wraps a trigger and reveals a compact tooltip on hover or keyboard focus — CSS only, no client state, so it works inside a Server Component. Desktop only: a touch screen has no hover. Mind the position names: "left" anchors the box to the trigger’s right, matching the legacy arrow map.
Props
<Tooltip> props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'primary' | primary = navy, secondary = green — the style guide's two tooltip colors. |
position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Which edge the 7px arrow sits on. |
shadow | boolean | false | — |
compact | boolean | false | icon's scale that box is several times the trigger and reads as a popover. |
className | string | '' | — |
childrenrequired | ReactNode | — | — |
Accessibility
- Shows on focus as well as hover, so a keyboard user can reach it.
- The trigger needs its own accessible name; the tooltip supplements it rather than replacing it.
Usage
Don’t
- Don’t put anything essential in one. There is no hover on a phone, and the hint is then simply gone.
- Don’t use it as a label — that is what a label is for.
Related:Alert