Tooltip

COMPONENTS

Tooltips display informative, yet nonessential text on hover, tap, click or focus.

View GSUI Toolkit Documentation (Internal Only)

Tooltips can display definitions, clarifications, or hints. Use tooltips for text that is nonessential to the user journey.

Label
Container
Tip

Variations

There are two types of tooltips — standard and dismissible. Both types can either show or hide the tip point. Standard tooltips can be closed by either moving the cursor or selecting anywhere outside of the tooltip area. Dismissible tooltips can only be closed by selecting the close icon.

Appearance

Placement

Tooltips can be placed to the top, bottom, left or right of their related content. For top or bottom tooltips, the placement can be more specifically aligned to top left, top right, bottom left or bottom right. Additionally the placement can be set to automatically adjust position to avoid being cut off by a container or browser edge.

Reverse Color

When used above a dark background the tooltip should use reverse coloring.

Sizes

Tooltips can be displayed in large, medium, small and extra small sizes.

Examples

Guidelines

Avoid hiding essential content within a tooltip.
Tooltips should not overrun container boundaries or pages.
Do not use for long text, instead use Popover.
Do not include rich content such as videos or photos.
Do not display multiple tooltips simultaneously.

Popover

Popover displays nonessential text or rich content in a temporary window.

Writing Guidelines

Guidelines for the best words, with the right voice and tone, to help users efficiently complete their tasks.

Contents