A tooltip is used to specify extra information when the user moves the mouse pointer over the element.
Tooltips can be added to Button by Grommet tip props. Tooltips will display information upon hover and focus. Tooltips provide messages that give the user more information about an element.
- Don't use Tooltips for information that is vital to task completion.
- Provide a brief and helpful content inside the Tooltip.
- Support both mouse and keyboard hover.
- Use Tooltip consistently throughout your site.
- Tooltip should never contain interactive components.
Make sure to test Tooltip positioning to ensure that the content does not block other information pertinent to the user's goal.
Tooltips should support both mouse hover and keyboard focus. Do not use tooltips for information that is vital for the user to complete the task.
There are a few different ways that you can use a Tooltip.
An icon without a label should be provided a Tooltip to remove any ambiguity around an icon's meaning. An example can be found in a demonstration of Persistent Navigation, where a sidebar contains icon-only buttons.
A tooltip can be used to reiterate traditional symbols.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.