Tooltip
Display contextual information on hover
Tooltips display additional information when hovering over an element.
Usage
mdx
1Hover over <Tooltip content="This is a tooltip!">this text</Tooltip> to see more.Live Examples
Basic Tooltip
Hover overthis text to see a tooltip.
Different Positions
Top |Bottom |Left |Right
With Icons
In Context
This feature isNew{' '}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Element that triggers tooltip |
content | string | required | Tooltip text content |
position | "top" | "bottom" | "left" | "right" | "top" | Tooltip position |
Best Practices
Tip
- Keep tooltip content concise (1-2 sentences max)
- Use for supplementary information, not critical content
- Ensure the trigger element is focusable for keyboard users
Common Patterns
Help Icons
Add small help icons next to form labels or features:
mdx
1**Email** <Tooltip content="We'll never share your email">2 <Icon icon="help-circle" size={14} />3</Tooltip>Abbreviations
Explain abbreviations inline:
mdx
1The <Tooltip content="Application Programming Interface">API</Tooltip> is well documented.TheAPI is well documented.