We love a good tooltip around here. Learn how to use this versatile UI pattern the right way to delight users and add value.
When it comes to tooltips, what separates the good from the downright annoying?
An annoying tooltip is overbearing, redundant, or—worse yet—confusing and distracting. A bad tooltip is a lazy fix to a poor user experience.
A good tooltip is subtle. It helps a user get the job done and then gets the heck out of the way. A good tooltip can look pretty, but what really matters is whether or not it provides value to the user.
When used with consideration, tooltips can be a powerful UI pattern that will guide your users to take action in your product. A good tooltip can be a great thing indeed.
Below, we’ll look at how to design tooltips that enhance the user experience and add value.
What are tooltips?
Look familiar? Of course it does—tooltips are everywhere!
Traditional tooltips—think back to old Microsoft applications—only appeared when the cursor hovered over an element. Tooltips today are much more dynamic. Many web and mobile products use tooltips that appear when a user lands on a page or are triggered after interaction with another element.
Use cases for tooltips
Tooltips should be treated as annotations—they can help explain something, but they aren't the main attraction. As contextual and flexible annotations, tooltips can enhance UX in a wide range of use cases. For example:
Tooltips for user onboarding
Product tours are common user onboarding mechanisms. Tours can walk users through a specific, early workflow or can call out the most important parts of a product’s UI. Tumblr combines tooltips (sans the tip) with simple animations for an especially delightful product tour:
When you want to draw your users' attention to a new feature without interrupting their workflow, tooltips can be the perfect vehicle for a pithy feature announcement. The single-tooltip feature announcement is no less effective for its subtly. And the compact size of most tooltips is especially well-suited to the limited space available for mobile interfaces. See LinkedIn's mobile app, for example:
Tooltips for detailed and interactive walkthroughs
Tooltips can be used to walk users through a specific action. Action-driven tooltips only advance or go away when a user interacts with another element.
Employee scheduling tool Humanity uses an interactive product tour to walk users through a complex workflow. The tooltip below disappears when the required action is complete:
While powerful, action-driven tooltips can feel heavy-handed and aren’t always appropriate if you want users to explore your product on their own and without constraints. They are best saved for situations when users really need to perform a complex series of actions in order to accomplish a goal or reach their aha moment.
Tooltips for contextual help
Part of what makes spreadsheet-database hybrid Airtable so powerful is the sheer breadth of its features and functions. That can also make it overwhelming to new users.
To avoid overloading users with information during the initial onboarding tour, Airtable uses contextual tooltips as the user navigates through the app to offer advice in the right place at the right time:
Similarly, Github uses tooltips to periodically alert users to offer helpful hints that help them gradually level up their product usage:
Another approach to contextual help is to use persistent tooltips, like this one from Google Docs:
Persistent tooltips can explain icons that may be unclear to users and provide more information on the spot. Hover tooltips, like the one shown above, work best for this scenario.
When not to use tooltips
The beauty of tooltips is that they’re transient and highly contextual. Tooltips are not good for mission-critical information or anything that a user needs to refer back to frequently. Tooltips typically don’t belong on images, videos, forms, or other content that users have to interact with.
Don't use tooltips where they aren't needed. That sounds obvious, but you'd be amazed by how many products use tooltips to restate UI text or UX copy that's already visible and perfectly clear.
Repetition has its uses; redundancy does not.
Similarly, you shouldn’t use a tooltip for an action that the user performs regularly. How annoying would it be if an email provider had a persistent tooltip over “send”?
Tooltip design best practices
How do you design something that is eye-catching enough to be helpful yet unobtrusive enough to be ignored?
It’s important to consider all the possible components of a tooltip:
Copy—tooltips can contain a header and body text, or just body text. Headers can signal that the message is a feature announcement (with a bolded “new,” for example). For smaller tooltips, skip the formalities and go straight to the body text.
Exit(s)—how a user closes the tooltip message. This can be as straight-forward as an “x” or "close" button, or it can be triggered by how a user interacts with a certain element.
Progress bars—tooltips that are part of a multi-step product tour can include a progress indicator to let users how far along they are in the process.
Use action-oriented language that conveys value concisely and straightforwardly. Many tooltips start with the imperative, which feels empowering. An example from Google Slides:
Keep the text short—fewer than 150 characters and no more than two lines of body text make for easier reading. If your message needs to be longer, consider breaking up the message across multiple tooltips, or use a modal window or slideout instead.
(For more on getting UX writing right, this post on the magic of microcopy is a great place to start.)
There are a surprising number of ways to close a tooltip. The simplest option is to let users "x" out or dismiss the message. To end on a more affirmative note, single tooltips can use a confirmation CTA (like Asana's “Got it”).
Single tooltips can also get away with not having any exit and close when the user clicks elsewhere on the screen.
In multi-step tours, progress bars or simple fractions let users gauge how far along they are in the process. Progress indicators, like the "1 of 3" in the example from subscription management software Recurly below, can motivate users and improve the rate of completion for a product tour.
We recommend keeping product tours short—around 3 to 4 steps in total. While longer product tours may provide more information, they usually result in lower completion rates.
Other things to keep in mind when designing tooltips
Rich colors can make your tooltip pop and contrast nicely against light backgrounds.
Watch out for redundancy. If a feature is already explained by the copy, a tooltip may be unnecessary and end up frustrating users.
Be mindful of where you place your tooltips—covering up important parts of the page can feel more invasive than helpful.
Don’t build tooltips in isolation. Consider your other messages and orchestrate a consistent in-app messaging strategy that provides value. Measure performance and refine your messages as necessary.
A compact tool for user engagement
Like any other UI pattern, tooltips can be abused. But when they're designed to give users control and value, tooltips can be an elegant and powerful solution for driving engagement. We encourage you to read further—check out this article on How to Use Tooltips as Microinteractions or Google's Material Design guide to tooltips for more information.
If you're looking to build custom tooltips more easily (like, no-coding-required easily), be sure to give Appcues a try. We can help you create tooltips for user onboarding, product walkthroughs, feature announcements, upselling prompts, you name it—all in a matter of minutes, not weeks.