How to create good Tooltips

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. For 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 additional information to help users finalize a process or explain unknown words, features, or specific error messages.
2. Keep the content as short as possible, but don’t make it redundant.
3. Provide hints text for each application language to communicate with your users in their preferred language.
4. Think like a user, understand their needs and the struggles that they may have while using an application, and explain with hints the elements that are not self-explanatory.
5. Don’t cover content or functionalities with the hint.
6. Avoid providing essential information within a hint that could block a user from finalizing a process, as the user needs to hover over the element to get that information.
7. Remove cluttered text from the underlying app and add hints for unlabeled icons or buttons - used whenever contextual help is needed.
8. Use page segments to provide hints only on specific pages that match your URL conditions.
9. Use user segments to show different Hints to different groups of users. E.g., show more Hints to users who just joined an organization to help them better understand the tasks and processes. And hide those Hints if the end-user is part of a group working with the underlying app for a more extended period.
10. Use hints to help users explain what to add in each field for lengthy forms.
11. For specific errors, explain what the error message means by using the content selector for this specific error message.

Tooltips: Beacons

1. Use the beacon type to draw the user's attention to a new feature.
2. Use beacons to boost engagement with features your customers do not heavily use.
3. Use a beacon in the underlying application to create a call to action (e.g., to fill out a form or inform administrators if an error pops up in the underlying application).
4. Manually position the pulsating icon in case important elements are covered.
5. Provide beacon text for each application language to communicate with your users in their preferred language.
6. Use page segments to show beacons only on specific pages that match your URL conditions.
7. Apply user segments to show beacons only to the relevant groups of users. For example, show Beacons only to the users that have not yet interacted with the Guide that describes a new feature available in the underlying application.