The 3 proven ways to add inline tooltips and hints to your UI

Adding the right tooltips and hints to your UI is a smart choice. It can speed up user onboarding and reduce repetitive questions to support.

Sometimes users need just a line of text. In other cases they need to read a bit more or watch a video to understand how to use something correctly. Here are the three most popular ways to add inline tooltips and hints to your UI.

1. Inline hints

Let's say your users need to upload their photo and only specific image file types are allowed. Also, let's say the photo won't display correctly if it's smaller than X pixels. Adding that text right next to the upload field or button is a great way to avoid user frustration or support tickets from users asking why their image isn't uploading or displaying correctly. The following example is from the profile settings on Medium.com.

A screenshot from medium.com

2. Tooltips with an icon

A popular way to add help tips to your UI is by adding inline elements that show a message when users click on or hover over them. Below you can see a tooltip example from the Close CRM UI which is aimed at helping users understand how the email scheduling feature works.

A GIF from the Close CRM UI

Here is another example from the Stripe dashboard. In this case, the help tips are informative, and not related to an action, but the UX is the same.

A GIF showing the Stripe UI

3. Modal takeovers

Modal takeovers have generated a lot of debate over the past few years. There are many product owners and founders that would prefer to avoid using them as they can have a negative impact on the product's UX. For teams that feel comfortable using them, they are an alternative way to highlight information you want users to review before they focus on their next action. The following example is from HelpScout.

A GIF from the HelpScout UI
Related topics
Author