Tooltip
Tooltips can appear on hover, focus or click and should display very short (single-line) contextual descriptions of interface elements. You may also show Tooltips when button labels are absent (icon-only) or truncated.
Tooltips should be used to add context or extra information to a specific action in order to help the user understand the action they are performing. Tooltips should not be used for every action, but rather sparingly for more complicated or difficult to understand actions. Also all Icon Buttons should have a tooltip, since they do not have any text to help describe the action.
Example
Usage Rules
Do:
- Put helpful extra information in Tooltips
- Keep text short and direct
- Use Tooltips to label unlabled icons
- Use Tooltips to expand on truncated text
Don’t:
- Put unnecessary information in Tooltips
- Reiterate text from where the tooltip originates
- Use Tooltips as the only place to display valuable information to the user
Variants
Close programmatically
You can programmatically close the tooltip by using the close
prop. To be informed of the visibility state of the tooltip, you can use the onTooltipToggle
callback.
If the onTooltipToggle
prop is provided, Tooltip will stay open while the close
prop value is not true.
Customized
It's possible to render any valid React component as the Tooltip's content.
Customized with Icon
It's possible to render any valid React component as the Tooltip's content.
Delayed
Delays are used to ensure the reader is actually interested in the element, and not accidentally displaying a tooltip when navigating somewhere else.
Display
It is possible to ommit a tooltip whenever necessary in a easy way. When the prop display
is false
, it will render directly the children passed to it. The default value is true
.
Disabled Wrapper
We have a wrapper to show the tooltip for disabled children, which can be accessed by disabledWrapper
.
Also, if you want to use double Tooltip for special cases. then you can also use the disabledWrapper
prop.
Here is an example for the Copy to Clipboard, which itself uses the tooltip internally and we are adding an additional layor of Tooltip.
Offset
Offset can be used for fine positioning of the tooltip, sometimes needed in niche cases, it has a default value of [0, 10]
, 0
is equal to centred, 10
is distance tooltip appears from reference.
note
This should only be used for small refinements.
Position
Readability is paramount. Choose the right position to make sure your Tooltip doesn’t cover anything important. In case there is no enough space on the screen, the Tooltip will be auto-positioned.
Definition Tooltips
Definition tooltips are a tooltip design pattern used to provide additional help, or to explain complex technical terms. It may be used on labels, embedded in paragraph text, or in compact spaces like table headers.
Best Practices
- Use on labels where an additional info icon would clutter the UI
- Use on proper nouns, technical terms, or acronyms with two letters or more
- Do not use a definition tooltip on words with fewer than two letters
Props
Name | Type | Default |
---|---|---|
content * The content of the tooltip can either be pure text or any rich content wrapped in a React component |
| — |
position The position of the tooltip |
| "top" |
offset Allows you to specify finer positioning of the tooltip |
| "[0, 10]" |
zIndex Use this prop to increase z-index on message popper |
| "auto" |
delay Delay tooltip visibility |
| false |
display Defines if the tooltip should be rendered, not influencing on the rendering of the content
wrapped by it |
| true |
children The trigger element. |
| — |
id Native HTML attribute: Link .
Internally, this component uses a random id. We use it to associate an input with a label element.
As the random id might break snapshot tests it can be overridden by setting an explicit id. |
| — |
disabledWrapper A warapper for disabled Button |
| — |
close Allows you to close the tooltip |
| false |
onTooltipToggle The callback to inform the parent component with the tooltip visibility state |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |