Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography

Layout
Modals
Modals / Confirmation
Panels
Tabs

Actions & Inputs
Buttons
Checkboxs
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields

Status & Feedback
Badges
Progress Indicators
Tooltips

Tooltips contain information to help users understand actions or page elements. They are short and triggered by a user hovering with their keyboard or mouse over a UI element. 

◢

Overview 

Use tooltips for short explanations or supplemental descriptions of a feature.

Content
Tooltips should have short, static information.
Don’t place actions in tooltips.
Avoid headers in tool tips. They should only be 3 lines in height, unless it’s a translation.

Don’t over-rely on tooltips
Tooltips are better suited for regular tasks where the user might need a reminder, rather than explaining an important setting or value the user might see rarely. 

If information is vital to understand or complete a step, then it should be visible above/next to the element, not hidden in the tooltip.

When to use Help Icons
Help icons can be used to indicate if a field has an available tooltip.

Use them to reduce information density on long forms the user uses regularly (e.g. adding a product) - but the information should be visible above the field (see form field guidelines) if there are few elements or the form is used rarely.

USE CASES:

Explaining a column in a table.

Explaining a simple button (e.g. add, edit) on page.

Used alongside a help icon.

Anatomy

Examples