Placements — hover each button
top · bottom · left · right
Tones
dark (default) · paper
Common uses
Icon buttons, disabled elements, stat context
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | string | ReactNode | — | Tooltip text or content. Empty/null suppresses the tooltip. |
| placement | "top"|"bottom"|"left"|"right" | "top" | Where the tooltip appears relative to the trigger. |
| tone | "dark" | "paper" | "dark" | dark = ink background / lime text. paper = white background / black text. |
| delay | number (ms) | 120 | Delay before tooltip appears. 0 = instant. |
| children | ReactNode | — | The trigger element. Tooltip appears on hover/focus of this child. |
Usage
import { Tooltip } from "components/ui/Tooltip";
// Wrap any element
<Tooltip content="Delete campaign">
<IconButton label="Delete" variant="dark"><TrashIcon /></IconButton>
</Tooltip>
// Placement + tone
<Tooltip content="Opens in new tab" placement="right" tone="paper">
<a href="https://example.com">External link</a>
</Tooltip>
// Instant (no delay)
<Tooltip content="Copied!" delay={0}>
<Button>Copy</Button>
</Tooltip>