HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
Usage
Accessibility
Truncation with Tip
Variants
Truncated table cell content
Tip with icons
Tip with exit
Tip content length
Components

Tip

A Tip is a small layer that opens when the user moves the mouse pointer over an element. The intention is to offer helpful information in the immediate context.

Guidance

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.

Usage

  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.

Accessibility

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.

Variants

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.

Image depicting an example HPE Design System table implementation.
See truncation example in DaataTable

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.

Add service

Visit the HPE catalog to start adding all of your favorite services.

Tip content length

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

Related

Related content you may find useful when using Tip.

Layer

Layer is a component allowing content to be displayed on top of the page the user is currently on.

Button

Buttons are graphic elements that indicate to users that actions can be performed.
HPE
Text

Header

Header is a Box with a set of preset properties for introductory content.
Side-to-Side Navigation Preview

Side to Side Navigation

Allows users to access sibling screens sequentially from the same level of the hierarchy.
HPE Tables Preview

DataTable

DataTable presents data in a column and row format.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page