Skip to content

Components / 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.


  • Tooltips can be sentence fragments.



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
The position name refers to the position of the arrow in relationship to the tooltip container.


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

Inspect component


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

Toast message background color; also used as a neutral message banner color pairing and occasionally as a button in cards lists


Toast message text color

© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.