v0.27.0
Tooltips contain information to help users understand actions or page elements. They are short, and triggered by a user hovering with their keyboard or mouse over a UI element. Tooltips Design Guidelines.
Edit the code below to see your changes live!
Prop Name | Type | Default | Description |
---|---|---|---|
trigger * | ReactNode |
| React Node that triggers the tooltip on hover. |
placement | auto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-start | top | Sets the position of the Tooltip. |
Props ending with * are required
Tooltips can wrap any Element
. Tooltip will show on hover.
Edit the code below to see your changes live!
Tooltip can be anchored in different directions with the placement
property. It will automatically find a position if there's not enough space in the chosen direction.
Edit the code below to see your changes live!