A tooltip is a brief message that appears when a user interacts with a specific app or website element. A good tooltip is subtle, provides the user with valuable information, and then gets out of the way. 

Encouraging users to explore your product requires a delicate balance. 

You want to build trust with your customers through varied engagement strategies, but you don’t want to risk annoying them by getting in touch too frequently. 

So how can you encourage users to discover all your product has to offer without annoying them in the process? One simple but effective way is through tooltips!

Tooltips are a small but powerful UI pattern designed to give users instant value. 

Why should you use tooltips? 

Tooltips are an effective UI pattern that provides users with additional information or ‘helpful hints’ at the optimal time in their workflow. Tooltips are invaluable because they’re hyper-specific and contextual. They’re most frequently attached to an individual element within a product and convey one targeted message.

One common use case of tooltips is new feature announcements because tooltips are perfect for drawing users’ attention to product updates without interrupting their workflow. They’re also great at helping new users navigate through an onboarding flow.

Some examples of thoughtfully designed tooltips

Tooltips can remind users of hidden features, like in this example from Spotify:

tooltip-example-1

They’re also helpful during the initial user onboarding process. Slack uses contextual tooltips as the user navigates the app to offer advice at the right time: 

example-tooltip-2

Tooltips can provide answers to questions the user might have, as shown in this Shyp example:

example-tooltip-3

Best practices for designing tooltips 

The goal is to design something noticeable enough to be helpful but low-key enough to not be intrusive.

When you start conceptualizing, consider all the possible elements of a tooltip:

  • Copy:

    Keep the messaging short, simple, and action oriented. Consider starting with the imperative (example: Try the new Presenter view). Tooltips can consist of a header and body text or only body text. Bolded headers may indicate that the message is a feature announcement. For smaller tooltips or onboarding flows, it’s best to go straight to the body text.

  • Exit(s):

    Plan how your users will close out the tooltip message. Straightforward options include a simple “x” or “close” button.” Messages can also be closed if the user clicks anywhere else on the screen.

  • Design:

    Plan ahead and design a custom theme so you can quickly implement tooltips according to your brand specifications. Choose a background color that will help the tooltip stand out against the page. Only place an overlay on your website if a tooltip relays truly critical information to your user. Otherwise, the darkened background can make a simple tooltip feel intrusive.

Analyze performance and adjust accordingly

Tooltips are a small but powerful UI pattern designed to give users instant value. To make sure your tooltips are living up to their job description, it’s essential to analyze the performance of your tooltips and make tweaks. For example, if most users are closing a tooltip immediately, it's a good idea to reevaluate if that tooltip is needed or if it could be redesigned to be more helpful. Be sure to measure your performance and refine your design and messages as necessary. 

Let’s wrap up with some more tips:

  • Avoid redundancy. A tooltip may be unnecessary in some situations.

  • Only explain things not immediately discernible from the UI or design. 

  • Be aware of where you place tooltips and don’t cover up any critical parts of the page. 

  • Users lose interest quickly and only want information they can act on, so only show one tooltip at a time and no more than four in a row. 

  • Don’t only rely solely on tooltips. Make them part of a larger in-app messaging strategy that provides value as a whole. 

  • Analyze and test!

You can engage and delight your users (without annoying them) with tooltips. Follow these strategies, and you’ll be well on your way to engaging and retaining users.

To build code-free, beautifully designed tooltips, create a free Lou account.

Published on May 5th, 2021