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. It’s 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 user interface (UI) pattern that guides 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.
A tooltip is a short message that appears when a user interacts with a specific element on a website or in a mobile app.
Look familiar? Of course it does—tooltips are everywhere!
Traditional tooltips—think back to old Microsoft applications—appeared only 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 after a user interacts with another element.
Tooltips should be treated as annotations—they can help explain something, but they aren't the main attraction. Contextual and flexible, tooltips can enhance UX in a wide range of use cases.
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 and functionality. 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 eight 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. You don't need a huge feature rollout—the single-tooltip feature announcement is no less effective for its subtlety.
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, as Spotify does:
Tooltips can be used to walk users through a specific action. Action-driven tooltips advance or go away only 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 users add a new employee to their accounts:
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—an aspect 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 moves through the app to offer advice in the right place at the right time:
Similarly, web-based hosting platform GitHub uses tooltips to periodically alert users to offer 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 additional information on the spot. Hover tooltips, like the one shown above, work best for this scenario.
While tooltips are great for product or feature tutorials, sometimes tooltips are useful for driving user engagement.
When users successfully complete a coding problem, online learning platform Codecademy gives them the equivalent of a gold star. Users are rewarded with a tooltip featuring an enthusiastic “Way to go!” right next to a CTA that takes users to the next exercise.
Team management tool Soapbox uses tooltips to make product engagement as simple as possible for its users. When a user logs in to their account and opens up a meeting, a tooltip appears at the bottom of an empty agenda and prompts them to add items to it.
There’s no pressure for users to think of agenda items, because the tooltip links to a modal window with tons of suggestions, including conversation starters and templates.
The tooltip only disappears if a user adds an item to their agenda or clicks to add a suggested idea.
Tooltips are not good for mission-critical information or anything that a user needs to refer back to frequently. They 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 them 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 multistep 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 below, from subscription-management software Recurly, can motivate users and improve the rate of completion for a product tour.
We recommend keeping product tours short—around three or four steps. While longer product tours may provide more information, they usually result in lower completion rates.
Like any other UI pattern, tooltips are often 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 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 (as in no coding experience required), be sure to give Appcues a try. We can help you create tooltips for user onboarding, product walk-throughs, feature announcements, upselling prompts—you name it—all in a matter of minutes, not weeks.
