overlays
Tooltip
Example
Import
import { Tooltip } from '@connor-adams/designsystem'Usage
A small hover/focus hint for icon buttons and truncated values (full merchant name, exact timestamp). Keep content to a few words — never essential-only info.
<Tooltip content="Reconciled 2 days ago" side="top">
<Button variant="ghost" size="sm">i</Button>
</Tooltip>
Variants: side="top" | "bottom" | "left" | "right".
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | ReactNode | — | |
| side | "left" | "right" | "top" | "bottom" | undefined | top | |
| className | string | undefined | — | |
| style | CSSProperties | undefined | — |