Top (default)
Bottom
Left & right
Icon-only trigger
With icon in tooltip
With shortcut
Multiline
Aligned start & end
Enter animation variants
enterAnimationVariant — click each button to show and hide the tooltip; compare spring (default, spring, zoom) vs legacy ease presets. Powered by motion (AnimatePresence + spring).
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| mode | Optional | "light" | "dark" | light | Color mode. |
| content | Optional | ReactNode | — | Tooltip text or content. |
| icon | Optional | ReactNode | — | Optional leading icon inside the tooltip. |
| children | Optional | ReactNode | — | Trigger element — button, IconButton, etc. |
| side | Optional | "top" | "bottom" | "left" | "right" | top | Placement relative to trigger. |
| align | Optional | "start" | "center" | "end" | center | Alignment along the placement edge. |
| multiline | Optional | boolean | false | Wrap long tooltip copy instead of one line. |
| portal | Optional | boolean | true | Portals to document.body by default so overflow ancestors cannot clip the tooltip. Pass portal={false} for inline placement. |
| disabled | Optional | boolean | false | Suppress tooltip display while keeping the trigger (used by TruncatedText when text fits). |
| positionRef | Optional | RefObject<HTMLElement> | — | Portaled placement bounds (defaults to trigger wrapper). TruncatedText passes the text span ref. |
| enterAnimationVariant | Optional | EnterAnimationVariant | default | Tooltip enter/exit via motion (AnimatePresence + spring). default/spring/zoom use fluid spring physics; subtle, fade, slide-*, scale, or none. |
| open / onOpenChange | Optional | boolean | — | Controlled visibility. When open is set, hover/focus no longer toggles the tooltip. |