Tooltip
Overview
Tooltips contain information to help users understand actions or page elements.
When to use:
- They are short, and triggered by a user hovering with their keyboard or mouse over a UI element.
- They are used to help reduce information density on otherwise crowded pages or forms.
- Use tooltips to explain columns in a table, explain buttons (e.g. add, edit) on page or alongisde a help icon.
Implementation
Edit the code below to see your changes live!
Props
Prop name | Type | Default | Description |
|---|---|---|---|
trigger * | ReactElement | | React Element 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 | auto | Sets the preferred position of the Tooltip. Explicit placements flip to the opposite side when there is not enough space. Auto placements pick whichever side has the most available space. |
middleware | Middleware[] | | Floating UI middleware to customize positioning. Replaces the default middleware stack (offset(4), flip/autoPlacement, shift). Import middleware from @floating-ui/react. |
Props ending with * are required
Do's and Don'ts
Do |
|---|
Tooltips should have short, static information. |
Keep Tooltips to less than three lines tall. |
Don't |
|---|
Avoid headers in Tooltips. |
Don’t place actions in Tooltips. |
If information is vital to complete a step, then it should be visible above/next to the element, not hidden in the Tooltip. |