Tooltips: How to create and use the mighty UI pattern

Palm-sized spider invasions. Black Mirror robot dogs. Banana extinction.

Customers worry about enough throughout the day. No, your product won’t save them from the impending robo-pocalypse, but it offers a way to address one of their more immediate pain points.

Tooltips are UI patterns that offer a way to guide a customer through their user journey with minimal friction. Well-designed tooltips gently educate and engage customers as they use your product. They improve UX, which in turn positively impacts engagement, usage, and adoption rates.

As a concept, tooltips are simple enough, but you must implement them properly (or risk frustrating users instead of helping them). Users want immediate, stress-free results, and few are likely to return to a product after a poor experience. You don’t want your product to become a persistent pain point that aggravates your customers. Instead, discover how to leverage short, commanding, and powerful tooltips to delight your customers and improve your overall UX.

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 appeared when you hovered your cursor over an element. (Think back to old Microsoft applications.) Today, tooltips are much more dynamic. Many web and mobile products use tooltips when a user lands on a page, or after a user interacts with a specific element.

Tooltip examples to use in your product

Tooltips should be treated as annotations—they help explain things, but they aren’t the main attraction. Tooltips enhance UX in a wide range of use cases, including:

User onboarding tooltips

Product tours are common user onboarding mechanisms. Tours walk users through a specific, early workflow or call out the most important parts of a product’s UI and functionality. Tumblr combines tooltips with simple animations for an especially eye-catching product tour:

Tooltips greatly enhance most product tours—but not all of them. You should study examples of onboarding UX/UI patterns to determine whether tooltips are right for your product’s onboarding process, or if another UI pattern is a better fit.

New feature announcement tooltips

Tooltips are the perfect vehicle for a pithy feature announcement. They’re especially helpful for drawing your users’ attention to a new feature without interrupting their workflow. You don’t always need a huge feature rollout: the single-tooltip feature announcement is effective for its subtlety.The tooltip’s compact size makes them well-suited to the space constraints of mobile interfaces, too. Just check out LinkedIn’s mobile app to see how that looks in action:
‍

‍
Tooltips can also remind users of overlooked features. Spotify does this often:

Detailed and interactive walk-through tooltips

Tooltips are handy for walking users through a specific action. Action-driven tooltips 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 users add a new employee to their accounts:
‍

Detailed and interactive walk-through tooltips

‍
Powerful, action-driven tooltips feel heavy-handed and aren’t always appropriate if you want users to explore your product on their own and without constraints. We like to save these types of tooltips for situations when users really need to perform a complex series of actions to accomplish a goal, or reach their aha moment.

Contextual tooltips

Your more unique features may require a bit of context before users fully grasp the best way to use them. Take Airtable, for example. Part of what makes their spreadsheet-database hybrid so powerful is the sheer breadth of its features and functions—an aspect that can also make it overwhelming to new users.

Airtable avoids overloading users with information during their initial onboarding tour by using contextual tooltips as the user moves through the app, offering advice in the right place at the right time:

Similarly, web-based hosting platform GitHub uses tooltips to periodically offer hints that help users gradually level up their product usage:
‍

‍
Use persistent tooltips to add additional contextual help. Persistent tooltips can explain icons that may be unclear to users and provide additional information on the spot. Hover tooltips work best for this scenario, like this one from Google Docs:
‍

Product engagement tooltips

Tooltips also drive user engagement. Users may not use your product despite being fully aware of how to use it. Well-placed tooltips help nudge these users in the right direction to get them to use your product and appreciate its value.

‍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.

Users aren’t pressured to think of agenda items ahead of meetings because the tooltip links to a modal window with 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.

Start building

Take control of your user's experience with Tooltips:

Improve feature adoption
Educate users when they need it
Make copy changes without an engineer

How do you create a tooltip?

Tooltips designed to give users control and impart value are an elegant and powerful solution for driving engagement. There are a few methods you can use to create tooltips for your product, including:

1. Open-source options

Open-source tools serve as a great way for product teams with the right resources to create tooltips. Those proficient in coding can use programs like Bootstrap and jQuery to create functional tooltips. However, teams lacking the personnel, bandwidth, or experience to build robust tooltips with code might require third-party developers to get results. This may be a prohibitively expensive option for some teams.

2. JavaScript, HTML, CSS

Those with advanced coding experience can build expert tooltips using JavaScript, HTML, and CSS. Coding gives developers the ultimate flexibility to create and customize tooltips that fit their needs and their product’s aesthetics. However, teams lacking an in-house coding expert will again require third-party assistance. This solution adds cost to your product’s development both immediately and whenever you need to pay a developer to update and maintain your tooltips.

3. The no-code way: Appcues

Appcues enables you to create tooltips and other important UI patterns without code. Use Appcues to create tooltips for user onboarding, product walk-throughs, feature announcements, upselling prompts—you name it—all in a matter of minutes, not weeks.

4 tooltip design best practices

The best way to implement tooltips within your product ultimately depends on your final goal. Tooltips for a product tour may use different copy, design, and placement principles than those of contextual tooltips. However, there are several best practices to consider while building any variety of tooltip, including:

Write short, commanding copy

Tooltips either contain both a header and body text, or just body text. Messages like feature announcements use headers to give the tooltip more weight and signal the functional importance of the message. Users often prefer smaller, simpler tooltips for less urgent communications—so we suggest skipping the formalities in quieter tooltips and ditching the headers.

Use imperative statements in appropriate sections to drive the user to action. Commands convey value concisely and directly. An example from Google Slides:
‍

‍
Additionally, you should keep the text short. Tooltips with fewer than 150 characters (and no more than two lines of body text) make for easier reading. Break up longer messages across multiple tooltips, so readers don’t get overloaded with a lot of info in a small space. Alternatively, consider using a modal window or slideout instead.

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 Asana's “Got it”).
‍

‍
The best exit to use for your product depends on what you plan on using your tooltips for. For example, customers close click-outs with a single touch. This makes tooltips a great choice for pointing out details in quick succession. However, the ability to quickly click through the information makes it more likely that certain users will click through a tour rapidly without reading anything. You should instead use dismissals or acknowledgments for essential information to force the user to locate and engage with the tooltip in question.

Use progress bars to track multi-step product tours

Tooltips included in multi-step product tours often include a progress indicator. This lets users know how far along they are in the process. Progress indicators motivate users and improve the rate of completion for a product tour. Check out the “1 of 3” example below from subscription-management software Recurly:
‍

‍
Be careful when using tooltips in long product tours. They convey important information so well that you may be tempted to overuse them. Longer product tours may provide more information, but they usually result in lower completion rates. Keep your product tours short to maintain an optimal user onboarding experience.

Know when not to use tooltips

Tooltips provide a smoother UX when used correctly, but not every situation calls for a tooltip. The misuse of tooltips may actually have the exact opposite effect you intended—and you’ll probably wind up frustrating your users. You may want to refrain from using tooltips for:

Permanent resources. 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.
Restating the obvious. Don’t use tooltips where they aren’t needed. 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.
Constant reminders. You shouldn’t use a tooltip for an action that users perform regularly. Imagine a user’s annoyance if an email provider had a persistent tooltip over the “send” icon.

Other tooltip best practices to keep in mind

Successful tooltip usage improves the user journey while increasing the likelihood that a user will adopt your product and its features. However, a poorly designed tooltip risks frustrating users instead of helping them. It’s worth investing in honing your chops to ensure you’re using tooltips for good, not evil. Take your skills to the next level with these pro tooltip … well, tips:

Use rich colors to make your tooltip pop and contrast nicely against light backgrounds.
Be mindful of where you place your tooltips. It feels more invasive than helpful when tooltips cover up important parts of the page.
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.

Do tooltips work on mobile?

It’s important to consider the context in which users interact with tooltips—especially which devices they’re on. Teams looking to optimize their product for mobile usage often ask themselves, “Do tooltips work for mobile?”

The short answer: yes. Tooltips created for mobile have the same function and benefits as those for web-based apps. However, there’s a chief difference between those engaging with tooltips at their desktop computers and those scrolling through their iPhones: display size. Unless you’ve purchased a smartphone the size of a pizza box, your tooltips have less space to exist within your UI. Tooltips that fit comfortably within a web-based display may overlap with your product’s important features to create UX chaos and no small amount of friction.

Ultimately, this means you should consider the following when designing your tooltips for mobile apps:

Keep it brief. This is true for all tooltips, but mobile tooltips will require you to distill your message to the fewest words possible to save space. You may not have space to include a CTA as you would for your desktop app, so make your text as commanding as possible.
Maintain white space. Think carefully about how your tooltip will look against an already tight UI.
Use images. An illustration or diagram can do the same heavy lifting as multiple tooltips worth of text in certain situations.

Streamline user onboarding with tooltips and other UI patterns

Tooltips work to maintain momentum during a moment of necessary friction. They inform and affirm without distracting a user from their journey. However, the user journey sometimes requires disruption to ensure the communication of essential information. Other UI patterns like modal windows and slideouts more forcefully draw attention to announcements. They serve as the louder alternative to the calmer, quieter guidance tooltips offer.