When it comes to tooltips, what separates the good from the downright annoying?
An annoying tooltip is overbearing. It’s redundant. Or worse yet, it’s 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.
“Good tooltips are designed to be so discreet that, sometimes, you’d swear they were never there," explains Marc Schenker of Web Designer Depot. "You only really miss them if they’re not there all of a sudden to help you achieve a task.”
You’ve probably seen tooltips in some of your favorite products—like Facebook, Twitter, and Slack. You may have even toyed with the idea of implementing them in your own product already.
When used with consideration, tooltips can be a powerful UI pattern that will guide yours users to take action in your product. Here, we look at how to design tooltips that enhance your user experience and add value:
What are tooltips?
Wikipedia defines a tooltip as a “common graphical user interface element ... used in conjunction with a cursor, usually a pointer.”
Google’s Material Design guidelines goes a little deeper:
Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element. Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.
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 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 treat 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 onboarding mechanisms. Tours can walk users through a specific, early workflow or can call out the most important parts of a product’s UI. Slack uses a product tour right after its welcome message to guide users through the chat sidebar.
(Psst—If you’re not sure whether or not tooltips are right for your onboarding experience, check out our analysis of 8 onboarding UI/UX patterns.)
Tooltips for new feature announcements
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 trending right now. Check out how Facebook used one for an important but otherwise hidden feature:
Tooltips can also be used remind people of overlooked features:
Tooltips for detailed and interactive walkthroughs
Tooltips can be used on navigation menus and other interactive elements to more strongly guide users to take 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.
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:
Another approach to contextual help is to use persistent tooltips.
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
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.
Copy
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.)
Exit(s)
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 Google’s “Got It”).
Single tooltips can also get away with not having any exit and close when the user clicks elsewhere on the screen.
Progress bars
In multi-step tours, progress bars or simple fractions let users gauge how far along they are in the process. Progress indicators 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. As you can probably tell by now, blue tooltips are in.
- 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. The example above could be aggregating if it doesn't disappear once a user starts typing.
- Don’t build tooltips in isolation. Consider your other messages and orchestra 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.
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, and feature announcements in a matter of minutes, rather than weeks.
