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
Style
Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.
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
|