Design

Tooltips

Updated: Mar 2, 2026

Tooltips are informative text labels that appear when users hover over an element. They help users understand the function of UI elements and provide additional information.

Usage

Tooltips should be used throughout the system to allow users to disambiguate and reveal information about UI elements, as needed.

Principles

Tooltips should be:

Transient: They should appear on hover and disappear after a short duration.

Paired: They should be placed near the associated UI element.

Succinct: They should contain short, descriptive text, but can also include icons or simple graphics in some cases.

Placement

Tooltips should be placed above or below UI elements, and should be on their own layer if possible. The depth distance between the tooltip and the UI element layer should be offset towards the user by 0.01 meter when the UI is 0.5 - 1.5 meters away from the user.

Text tooltip

Use a primary text tooltip or a primary and secondary tooltip depending on the amount of information to be displayed. The primary text should be succinct (ideally one word), and the secondary text can provide more detailed information.

Use a tooltip with an icon or image to provide more information and aid user comprehension.

Primary and secondary tooltip with icons

Next steps

More about tooltips

Specs — Interaction behavior, timing, and transitions

Implementation — Platform resources and SDK integration guides

Buttons

Fonts and icons

Did you find this page helpful?