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. 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.
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.
What is a tooltip?
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.
Tooltip examples to use in your product
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.
User onboarding tooltips
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:
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 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.
Product engagement tooltips
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.
When not to use tooltips
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”?
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 straightforward 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 multistep product tour can include a progress indicator to let users know how far along in the process they are.
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.
Other things to keep in mind when designing tooltips
Use rich colors to 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.
Remember that accessibility matters. If you adhere to inclusive tooltip design principles, assistive technology like screen-reading software will find and read every element. Refer to the Web Accessibility Initiative-Accessible Rich Internet Applications (WAI-ARIA) guidelines to ensure that all tooltips are accessible for your users.
A compact tool for user engagement
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.
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.