Skip to content

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
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
© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.