Why use it
Tooltips allow you to explain and highlight elements of the underlying application when a user interacts with the external application.
To choose the right tooltip type, choose the use case you wish to cover.
Example:
If you wish to explain a feature, use the hint type.
If you wish to highlight a feature in the underlying application, use the beacon type.
ℹ️ For optimal results, always combine Tooltips with Announcements and Guides for new feature launches on your application.
Tooltips: Hints
- The hint type provides extra information to help users with processes, unknown words, features, or error messages.
- Keep hints short and concise, avoiding redundancy.
- Provide hints in different languages for user preference and better communication.
- Understand user needs and struggles, explaining non-obvious elements with hints.
- Don't cover up important content or functionality with hints.
- Avoid blocking users from completing tasks by placing crucial information only when they hover over an element.
- Use hints for unlabeled icons or buttons when contextual help is needed.
- Target specific pages using page segments for relevant hints.
- Customize hints for different user groups, such as new or experienced users.
- Assist users in filling out lengthy forms by explaining what to add in each field.
- Explain specific error messages using content selectors.
- You can combine a Hint with a Guide to make sure that an end-user starts a process at a specific point.
Hints and hover menus
Avoid placing Hint tooltips directly on elements that trigger a hover menu (e.g., top-navigation dropdowns or hover-triggered flyout panels). When a user moves their cursor from the annotated element to the tooltip box, the hover menu may close because the cursor has technically left the trigger element. This means the user cannot read the tooltip and interact with the menu at the same time.
⚠️ Recommendation: For elements with hover-triggered menus that close on mouseleave, use a Beacon tooltip instead. Beacons activate on click and persist until dismissed, so they do not interfere with hover state behavior. |
If you need to annotate an element inside a hover menu:
Place a Beacon on the trigger element (e.g., the navigation item) to draw attention first.
Link the Beacon to a Guide that walks the user through the hover menu interaction step by step.
Avoid placing persistent Hint tooltips inside menus that require continuous hover to remain visible.
Tooltips: Beacons
- Use beacons to grab users' attention towards new features.
- Boost engagement by highlighting less-utilized features with beacons.
- Employ beacons in the app for specific calls to action, like form filling or error reporting.
- Manually position pulsating icons when important elements are covered.
- Provide beacon text in different languages for better user communication.
- Show beacons only on relevant pages that match URL conditions using page segments.
- Customize beacon display based on user groups, such as those who haven't interacted with the new feature guide.
- You can combine a Beacon with a Guide to make sure that an end-user starts a process at a specific point.
