How to create good Tooltips

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. 

Tooltips: Hints

1. The hint type provides extra information to help users with processes, unknown words, features, or error messages.
2. Keep hints short and concise, avoiding redundancy.
3. Provide hints in different languages for user preference and better communication.
4. Understand user needs and struggles, explaining non-obvious elements with hints.
5. Don't cover up important content or functionality with hints.
6. Avoid blocking users from completing tasks by placing crucial information only when they hover over an element.
7. Use hints for unlabeled icons or buttons when contextual help is needed.
8. Target specific pages using page segments for relevant hints.
9. Customize hints for different user groups, such as new or experienced users.
10. Assist users in filling out lengthy forms by explaining what to add in each field.
11. Explain specific error messages using content selectors.

Tooltips: Beacons

1. Use beacons to grab users' attention towards new features.
2. Boost engagement by highlighting less-utilized features with beacons.
3. Employ beacons in the app for specific calls to action, like form filling or error reporting.
4. Manually position pulsating icons when important elements are covered.
5. Provide beacon text in different languages for better user communication.
6. Show beacons only on relevant pages that match URL conditions using page segments.
7. Customize beacon display based on user groups, such as those who haven't interacted with the new feature guide.