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.
Or, as Marc Schenker of Web Designer Depot puts it:
“Good tooltips are designed to be so discreet that, sometimes, you’d swear they were never there. You only really miss them if they’re not there all of a sudden to help you achieve a task.”
You’ve surely seen tooltips in some of your favorite products—like Facebook, Twitter, and Slack. You may have even implemented them in your own product already.
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.
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.
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:
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:
(Psst—If you’re not sure whether or not tooltips are right for your onboarding experience, check out our analysis of 8 onboarding UX/UI patterns.)
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 can also be used to remind people of overlooked features, like Spotify does:
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.
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.
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”?
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:
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.
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.
Ready to implement this small but mighty UI pattern in your own product? There are plenty of open-source options for creating tooltips out there.
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.
