Tooltips: The ultimate guide

No matter how innovative or functional your app is, it must be easy to use.

If an app or website is confusing, a new consumer is unlikely to search your knowledge base, call/email/chat with you, or even ask for help. They'll quickly lose interest and leave. And with well over a billion other websites and millions of apps to choose from, they may be gone for good.

This is why companies spend substantial time, money, and effort on UX research.

If you have a complex or feature-rich website or app, some level of instruction may be necessary. That's where tooltips come into play.

Don't let UX problems go unnoticed

Use Dovetail to analyze all your customer interviews and uncover hidden UX issues that are costing your business every day.

Analyze with Dovetail

Tooltips are short labels containing text and images. They only appear when you move your mouse over a particular element, so they take up minimal on-screen space.

Typically, tooltips contain instructions about an icon or tips about how a feature works. Often, developers will link several tooltips together to form the basis of a short tutorial or to explain a multistep process.

Tooltips can be a great way to help your users learn about your product and how to use it. Create tooltips sparingly, because your UX should, in theory, be easy enough to use without them. If you find you’re relying on them too much, you may need regular user testing and more iterations of your product.

Tooltips should not be a substitute for help, guidance, or FAQs. Knowing when not to use them is just as important as knowing when they’d be ideal.

They are especially helpful in the following learning contexts.

Onboarding

If you're introducing a new mobile app or website, tooltips can be a great way to introduce users to its core functions. You can add tooltips highlighting your app’s most important functions when users first access the app.

If your app or site is feature-rich, add contextual tooltips. These tooltips will only appear as the user browses different portions of your product and can help avoid information overload. By using a tone in line with your brand's voice, you can create an even more engaging UX.

Announcing new features

Many companies use tooltips to announce new features. A new icon may lead to a long-desired feature, but if consumers are unfamiliar with it, they may ignore it.

A tooltip can draw attention to the new feature and explain how to access it.

Introducing complicated controls

Tooltips can be the perfect way to introduce complicated controls. For example, a new feature may require swiping the screen in a unique pattern. A tooltip can demonstrate this motion. 

What’s more, you can require the user to demonstrate their understanding of the control by screen-swiping in the same fashion to close the tooltip.

Upselling to customers

You can use tooltips to upsell to customers. By placing tooltips near functions available only with a paid subscription or higher-tier package, you can teach your users about the breadth of your product while encouraging them to unlock new features with an additional purchase.

Tooltips aren't complicated to build. If you have a web development team, they can build them using a combination of JavaScript, HTML, and CSS.

Multiple open-source resources allow you to customize code and create effective tooltips. Some companies offer low-code and no-code platforms specifically for tooltip development.

When it comes to creating great tooltips, there are technical and UX considerations.

From a technical perspective, ensure that any third-party code or platform you use meshes seamlessly into your existing tech stack and aligns with your IT security and governance policy.

From a UX perspective, your tooltips should be seamlessly aligned with your branding, but stand out enough so they aren't overlooked. Many companies use plain white tooltips that don't clash with their branding but contrast well when overlaid against graphic-rich backdrops.

You also should adhere to the following best practices when crafting tooltips:

Be direct and concise

Your tooltip should contain direct and concise language that informs the reader precisely about a feature and its function. Since a tooltip is meant to simplify things, the last thing you want is to chase the user away with confusing and wordy language.

Display tooltips contextually

Your tooltips should only display when users need them. If they always display, you'll distract and annoy your users. They are then likely to ignore subsequent tooltips—even the ones they need.

Test your tooltips

Engage some users to test your tooltips. What may read clearly to you may not be so obvious to someone unfamiliar with your app or site. Testing can also determine whether your tooltips are detracting from your design.

Conduct pre-launch A/B testing to determine which tooltip designs will be best received. Post-launch testing is also recommended due to changes in users, user knowledge and needs, and new features.

Use images only if necessary

An image can reduce your need for words, which is important if you must be concise. But avoid using multiple images in the same tooltip, which may make your instruction more confusing than necessary.

Consider how images or clips in tooltips will appear on mobile devices. Use them only if essential, and test your tooltips on multiple platforms and devices.

Keep design in mind

Ensure your tooltips don't obstruct relevant text on your app or site. Also, avoid using multiple tooltips simultaneously as this will confuse people. Use arrows that connect the tooltip to the referenced element to ensure users know which function you're talking about.

Also, make sure that tooltip design elements like color don't distract from the images or app/site design. Maintaining a certain amount of white space can elevate your text's prominence and ensure your users pay attention to it.

Design accessible tooltips

Your tooltips should be accessible to all users, including those with visual impairments and other disabilities.

Check that your in-house or third-party web developers or platform produce tooltips in line with Web Accessibility Initiative-Accessible Rich Internet Applications (WAI-ARIA) guidelines. And, as always, pre-launch testing is crucial.

Make exiting easy

Your tooltips should be easy to close. The simplest approach is a rollover trigger above an icon with typically a question mark indicating it as a tooltip. This opens the tooltip.

Once the user has rolled off the element, the respected tooltip removes itself. If you don’t have a rollover mechanism in place, make sure an "X" or "Dismiss" link is prominently placed.

To be more engaging, add affirmative text to your exit, like "Got it." If you're using multistep tooltips with an "X," many users will close the tooltip without going through all the steps.

If you allow them to exit without completing all the steps, add text to your exit that at least forces them to acknowledge they understand how to use the feature. Doing so may nudge them to think twice about skipping the steps.

Use progress bars

If you are using multistep tooltips, you can minimize the risk that users will exit early by using a progress bar.

If users are told from the start there are only three or four tooltips in a product tour, they may stick with it. However, if they toggle from one tooltip to the next with no apparent end in sight, they could become frustrated and close the tooltip early.

Use tooltips wisely

Tooltips aren't the only way to teach users about your product's functionality. There are knowledge bases, resource videos, community forums, and technical support.

Tooltips are helpful for short bursts of information about key features but should not be considered replacements for other resources. 

In addition, tooltips shouldn’t restate information that already appears in the app or site. And tooltips aren't great for simple and common functions that users will often perform. They're better reserved for less frequently performed tasks and those requiring a learning curve.

Tooltips do indeed work on mobile. Typically, they can be accessed by tapping and holding a button or on-screen element. However, mobile screens are a far more compact area. Keep this in mind when designing your tooltips and be careful not to obstruct key information and controls.

Place your tooltips near the icon, button, or link they refer to. They should not obstruct any elements or information already on the app or site to do with the feature in question.

Tooltips are popular partly because they are the least disruptive way to add in-app messages. But if you want to increase your message's prominence, you can use hotspots, slideouts, or modal windows.

Hotspots are patterns overlaid on an element of an app or site, designed to attract user attention. They can be animated or static and can be used for instructional purposes as well.

A slideout is a panel that appears over the app from right to left, partially obscuring it, and provides contextual information.

A modal is a window that appears in the center of the page and provides contextual information.