Tooltips are like your own digital Gandalf—trustworthy UI patterns that guide your customers 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 there's a catch: you must deploy 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.
How do you create a tooltip?
There are a few methods you can use to create tooltips for your product, including:
1. Open-source options
If your product team is proficient in coding, they can use open-source programs like Bootstrap and jQuery to create great tooltips. Without a team to build robust tooltips with code, you might need the help of third-party developers—which could get expensive.
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. This is ideal for product teams with in-house coding expertise and bandwidth.
3. The no-code way: Appcues
Appcues enables you to create tooltips and other important UI patterns without code. Use the Appcues builder to create tooltips for user onboarding, product walk-throughs, feature announcements, upselling prompts—you name it—all in a matter of minutes, not weeks.
YotPo, an eCommerce marketing CRM, uses tooltips built with Appcues to help users navigate their product, especially during onboarding.
Tooltip uses cases and 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 and/or user interface, or if another UI pattern is a better fit.
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
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:
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.
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.
General tooltip FAQ
How many types of tooltips are there?
There are two types of tooltips: standalone and alternative tooltips. Both of these are interactive elements.
Standalone tooltips are perfect for explaining a single product feature needing additional context. Alternative tooltips are usually part of interactive product walkthroughs or other similar experience flows. You may have seen this with 3–4 tooltips in succession in product tutorials or new feature explanations.
Where should tooltips be placed?
It’s best to place tooltips near their paired UI elements, like a button or an icon. For hover tooltips, the ideal placement would be at the head or tail of the pointer. Ensure that your tooltip doesn’t cover the element it’s supposed to explain.
Can a tooltip be a button?
No. A tooltip is usually attached to a button or any other interactive UI elements (icons, text links, etc). Tooltips are paired with these elements to offer explanations and guide the user journey.
What can I use instead of tooltips?
Hotspots are another great option for providing users with contextual hints in your product. Although modal windows and slideouts are also technically alternatives, the use cases for these experiences can be quite different. Keep your goal—and the overall UX—in mind when you decide on whether to use a tooltip or another UI pattern.
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.
Every onboarding process contains its quiet moments and its loud ones. You should use tooltips in conjunction with modals and slideouts to provide the most comprehensive and stress-free UX for your users. In the same way that onboarding should be stress-free for users, building UX-friendly onboarding flows should be easy for you. Create code-free tooltips, modals, and more with Appcues and take your in-app messaging game to the next level.
