Components / Tooltip

Tooltip

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:

Bottom-right
Bottom-center
Bottom-left
Right
Left
Top-right
Top-center
Top-left

Note

The position name refers to the position of the arrow in relationship to the tooltip container.

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.

Sample	Property	Sample value
	`toastBackgroundColor` Toast message background color; also used as a neutral message banner color pairing and occasionally as a button in cards lists	`#3E454DFF`
	`toastTextColor` Toast message text color	`#FFFFFFFF`