Tooltip
A popup that displays informative text when hovering or focusing on a trigger element.
Basic Usage
Placement
Variants
Mobile behavior
Tooltips have no hover on touch devices, so v2 ships with four explicit mobile modes. Tooltip auto-picks the right mode based on what's being wrapped, but you can override with mobileVariant.
| Mode | Interaction | Auto-default for |
|---|---|---|
tap | Single tap toggles; auto-dismisses after mobileAutoDismiss ms | Plain text, icons, badges |
longpress | Press and hold 500ms; release dismisses | <button>, <a> (so tap still fires the action) |
inline | Renders content as helper text below the trigger | <input>, <textarea>, <select> (so focus isn't fought) |
hidden | No mobile rendering | Decorative tooltips |
<Tooltip content="Saved automatically" mobileVariant="longpress">
<Button>Save</Button>
</Tooltip>
<Tooltip content="Required field" mobileVariant="inline">
<input type="email" />
</Tooltip>
Pair with mobileIndicator to add a subtle dotted underline on the trigger — useful for tap mode where users wouldn't otherwise know a tooltip exists.
<Tooltip content="Updated 2 minutes ago" mobileIndicator>
<span>Status</span>
</Tooltip>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactNode | - | Content to display inside the tooltip |
placement | 'top' | 'bottom' | 'left' | 'right' | 'top' | Placement relative to the trigger |
variant | 'dark' | 'light' | 'dark' | Visual variant |
delay | number | 200 | Delay in milliseconds before showing |
maxWidth | number | 250 | Maximum width in pixels |
mobileVariant | 'tap' | 'longpress' | 'inline' | 'hidden' | auto-detected from trigger | How the tooltip behaves on touch devices |
mobileAutoDismiss | number | 4000 | Auto-dismiss duration in tap mode (ms). Set 0 to disable. |
mobileIndicator | boolean | false | Add a dotted-underline visual hint on the trigger |
mobileMaxWidth | number | - | Override maxWidth on mobile (defaults to maxWidth) |
children | ReactElement | - | Trigger element |
className | string | - | Additional CSS class name |