Design

Tooltips

Updated: Dec 18, 2024

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.

Resources

Download the Meta Horizon OS UI Set in Figma or Unity to start building with customizable, production-ready components.

Design	Open in Figma. Change themes for specific components or entire pages and customize elements to fit your design system.
Implementation	Download the Meta Interaction SDK (Unity) to use the Meta horizon OS UI Set. Elements are customizable and support multiple input modalities.

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

Specs

Interaction behavior

Display the tooltip when the user raycasts over a UI element or component, and continuously display the tooltip as long as the user raycasts over the element.

Timing: Display the tooltip for 0.5 seconds after the user hovers off the element. If the user takes another action before that time ends, the tooltip will disappear.

Transitions: Tooltips use a fade transition pattern to enter and exit the screen.

Did you find this page helpful?