A Tip is used to specify extra information when the user moves the mouse pointer over the element.
Tips can be added to Button by Grommet tip props. Tips will display information upon hover and focus. Tips provide messages that give the user more information about an element.
- Don't use Tips for information that is vital to task completion.
- Provide a brief and helpful content inside the tooltip.
- Support both mouse and keyboard hover.
- Use Tip consistently throughout your site.
- Tip should never contain interactive components.
Make sure to test the Tip positioning to ensure that the content does not block other information pertinent to the user's goal.
Tips should support both mouse hover and keyboard focus. Do not use tooltips for information that is vital for the user to complete the task.
To display the full text when truncation occurs, hover over the truncated text and a tooltip will be shown with the full text.
Upon hovering, Tip presents additional information about a specific element in a small container. The Tip will remain visible as long as the user is hovering over the element.
There are a few different ways that you can use a Tip.
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 Tip 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.