Tip

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.

1. Don't use Tips for information that is vital to task completion.
2. Provide a brief and helpful content inside the Tip.
3. Support both mouse and keyboard hover.
4. Use Tip consistently throughout your site.
5. 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.

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.

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.

An icon without a label should be provided a Tip to remove any ambiguity around an icon's meaning.

A Tip can be used to reiterate traditional symbols.

Tip may be used for content varying in length. The size of the Tip will scale according to the content provided.