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 Tip.
- 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 Tips for information that is vital for the user to complete the task.
Truncation with Tip
To display the full text when truncation occurs, hover over the truncated text and a Tip 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.
Truncated Table Cell Content
Tips are useful to supplement truncated content within a table. In the example below, many of the service names are lengthy. Truncation may be applied cell content is constrained by column widths and supplemented with a tip upon hover to reveal the entirety of the cell's content.
Tip with icons
An icon without a label should be provided a Tip to remove any ambiguity around an icon's meaning.
Tip with exit
A Tip can be used to reiterate traditional symbols.
Tip Content Length
Tip may be used for content varying in length. The size of the Tip will scale according to the content provided.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.