Tooltips are labels that appear on hover and focus when the user hovers over an element with the cursor, focuses on an element using a keyboard, or in touch UI upon touch (without releasing). They contain textual identification for the element in question.

Editorial

• Tooltips can be sentence fragments.

Structure

Placement

Tooltips can be added to any element as needed in one of eight positions.

1. Bottom-right
2. Bottom-center
3. Bottom-left
4. Right
5. Left
6. Top-right
7. Top-center
8. Top-left

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.