Tooltips: How to Design the Small But Powerful UI Pattern
What separates a good tooltip from an annoying one?
An annoying tooltip is overbearing. It’s redundant. Or worse, it’s unclear and distracting. A bad tooltip is a lazy fix to a poor user experience.
A good tooltip is one that the user doesn’t really notice. It helps a user get the job done and then gets out of the way. It could look pretty, but what really matters is whether or not it provided value.
As Marc Schenker of Web Designer Depot writes, “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 probably seen tooltips in some of your favorite products, like Facebook, Twitter, and Slack. When used with consideration, tooltips can be powerful in guiding users to take action in your product.
Tooltip definitions
Wikipedia defines a tooltip as “common graphical user interface element...used in conjunction with a cursor, usually a pointer.”
Google’s Material Design guidelines provide a little more information:
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 can appear upon landing on a page, triggered after interaction with another element, on click, and more.
Use cases for tooltips
The golden rule for using tooltips is to treat them as annotations. They can help explain something, but they aren’t the main attraction. As contextual and flexible annotations, tooltips can enhance the user experience in a wide range of use cases.
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.
New feature announcement
If you want to draw attention to something new without making a huge splash, a tooltip can be the perfect, pithy announcement. The single-tooltip feature announcement is trending right now. Check out how Facebook uses one for an important but otherwise hidden feature.
Tooltips can also remind users of overlooked features in a similar way.
Super specific and interactive walkthroughs
Tooltips can be used on nav 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.
Google Analytics uses an interactive product tour to walk users through a complex workflow. The tooltip below won’t advance until users click the table in question.
While powerful, these tooltips aren’t appropriate if you want users to explore on their own and without constraints.
Contextual help
Persistent tooltips can explain icons that may be unclear to users and/or provide more information. Barely noticeable hover tooltips work best here.
When not to use a tooltip
The beauty of tooltips is that they’re transient and highly contextual. Tooltips are not good for information that a user needs to refer back to or that is mission-critical. Tooltips don’t serve images, videos, or forms, or other content that users have to interact with. They should not be used for input.
While it’s okay to show a tooltip a few times, 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
Designing something that is eye-catching enough to be helpful yet unobstructive enough to be ignored can be hard.
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. It can be as straight-forward as an “x” button out or more complex and triggered to how a user interacts with a certain element.
- Progress bars: Tooltips that are part of a multi-step product tour can tell users how far along they are.
Copy
Use action-oriented language that conveys value immediately. Many tooltips start with the imperative, which feels empowering. An example from Google Slides:
Tooltips often also start with “You can now...” which has a similar effect and conveys new-ness.
Keep the text short. Less than 150 characters and no more than 2 lines of text in the body make for easier reading. If your message is longer, a modal window, slideout, or breaking up the message across multiple tooltips may work better.
For more on UX writing, this post on the magic of microcopy is a great place to start (though anything by John Saito is gold).
Exit(s)
There’s a surprising amount of ways a user can 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, similar to Google’s “Got It.”
Tooltips that are in a series can have both an x out and “Next” CTAs to advance the tour.
Single tooltips can 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 know what to expect. This can help improve the completion rate of a product tour.
We recommend keeping product tours short, 3 steps or less. While longer product tours may provide more information, they usually result in lower completion rates.
Here’s more information on UI patterns for product tours, how you can improve your product tours, and ideas for building seamless flows.
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. While emphasizing new features are important, tooltips that call out things already explained in the copy may be unnecessary for users.
- Be mindful of what your tooltip covers. In most cases, it’s best to not cover anything. The example above could be aggregating if it does not 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.
For further reading on tooltip design, check out How to Use Tooltips as Microinteractions, Google’s Material Design, and Tooltips in UI Design.
A compact tool for user engagement
Tooltips are footnotes to your product (and are often used as footnotes in long-form text). They don’t tell the story, nor do they just repeat the story. Like any other UI pattern, tooltips can be abused. But when designed to give users control and value, tooltips can be an elegant and powerful solution to driving engagement.
There are plenty of open-source options for tooltips. To build custom tooltips more easily, give Appcues a try today.
