What are tooltips, exactly?

Of all the UX patterns you can use to engage customers with your product, tooltips are probably the most flexible and widely used.

And for many reasons—which we’re going to cover in this article.

So if you want to learn how tooltips can be leveraged to drive adoption and customer success, then keep reading.

Summary of tooltips and their use cases

• A tooltip is a text box that provides additional guidance and prompts users to take action.
• Popup tips trigger with a bigger, longer textbox (usually more intrusive) at different times. While tooltips generally trigger in a more contextual way.
• Tooltips are one of the best UI patterns when you want to include in-app messaging that isn’t disruptive for the user, provides contextual guidance, and incentivize feature adoption.
• Tooltips are used for:

1. Onboarding tours and interactive walkthroughs.
2. Introduce features that your users haven’t used yet.
3. Announce new features and product changes.
4. Drive account expansion with contextual upsells.
5. Provide help when the user feels stuck and direct them to self-service resources.

• Some best practices for using tooltips include:

1. Keeping the microcopy as clear and concise as possible.
2. Trigger tooltips based on segmentation and relevant context.
3. Avoid showing two tooltips simultaneously, so users don’t get confused.
4. Show a progress indicator to get away with showing more tooltips.
5. Allow users to close tooltips anytime.
6. Place your tooltips in a way that doesn’t block important components of the UI.
7. Use color contrast so your tooltips can draw attention.
8. Use arrow shapes to highlight which element the tooltip is referring to.
9. Embed your short videos inside your tooltips to make them more engaging and easier to understand.
10. Conduct regular A/B tests to keep improving.

• Tooltips don’t work well when they: contain info that users might need later, show redundant information, repeatedly appear for the same tip, or include resources that belong to the help center.
• You have three options if you want to create tooltips:

1. Code from scratch with all the customization you want, but limiting your dev resources and a logistical nightmare.
2. Use open-source tools to quickly add tooltips, but with fewer customization options and an equally harder time trying to customize it.
3. Leverage a no-code tool like Userpilot to create and launch all the tooltips you want without relying on devs or technical skills, with access to modern templates and great compatibility with your current tech stack.

What are tooltips?

A tooltip is a UI element that provides additional guidance and leads users to take action. It appears as a tiny box with a short message that triggers when the user hovers the mouse over a feature’s button making it highly contextual.

This is how they look on your UI:

Tooltips vs. popup tips

Although tooltips and popup tips are wildly similar, they trigger in different ways and for various purposes. For example, popup tips might trigger with a bigger, longer textbox (usually more intrusive) at different times.

On the other hand, a tooltip appears in a more contextual way. (when the user needs it the most), making it feel less intrusive and more valuable for the user experience.

Why should you use tooltips?

There are many reasons why you should use tooltips for in-app guidance:

• Tooltips generally use a small amount of screen real estate. Making them the least disruptive form of in-app messaging.
• Since tooltips only trigger contextually, they can provide additional explanations and guidance that would otherwise clutter the UI if displayed permanently.
• Tooltips are easy to implement and design (especially when using software).
• Tooltips have a lot of use cases, as you can use them for product walkthroughs, feature adoption, user onboarding, and more.

So, what are some of the most important use cases for tooltips?

What are tooltips used for?

Tooltips are widely used for a lot of purposes, including:

Onboarding tours for new users

When login into a product for the first time, you’ll often be faced with onboarding tours and feature walkthroughs to walk you through the product’s UI and functionalities.

If you look closely, those tours are basically sequences of tooltips showing each aspect of the feature itself, telling you what each icon does and its nuances.

Whereas, on interactive guides, those tooltips appear only after the user interacts with the previous tip—making it more engaging than a generic product tour.

Just check how this walkthrough shown on Kommunicate employs tooltips for user onboarding:

Drive feature discovery and adoption

Once users have developed a routine with your product, they’ll become feature blind and ignore everything else—making feature adoption harder.

With tooltips, you can highlight key features that users are not engaging with yet, teach them how to use them, and make them realize the value of your product entirely.

For example, you might be using Ahrefs just for keyword research and brainstorming, but the tool will always remind you that there are other helpful functions you might be missing—with tooltips:

Announce product changes and updates

Besides guiding users through their journey, tooltips are also great for announcing product changes and new features.

Since tooltips are less disruptive than a modal or a big popup, they can easily draw the users’ attention to new functionality and make them engage with it on the go.

However, if you have a major feature announcement with a lot of details and changes, a modal would be a better option. Though tooltips still work perfectly to introduce each small change little by little.

Drive account expansion

Well-placed and well-timed tooltips help you upsell upgrades without coming off as salesy.

The right way to upsell advanced features and drive account expansion is to do it contextually based on user actions. The best way to go about it is to add elements available for upgraded accounts and tell users they can have it if they choose a higher plan.

For example, Harvest uses a tooltip explaining that you can only import data by becoming paying customers:

Provide contextual help

If the user seems stuck, you can use tooltips to help with a specific feature—increasing the chance of triggering an “aha moment” in your customer.

Additionally, you can also use tooltips to direct users to self-help resources if they need more information without having to contact support unnecessarily.

Tooltip design best practices and examples

Now, how do you make sure you’re implementing tooltips in the right way?

Let’s go over ten best practices when it comes to designing effective tooltips:

Keep the copy clear and concise

For any UX copy, you should keep the language clear, to the point, and as short as possible.

Tooltips, specifically, are shorter than most UI patterns and thus require you to be more concise and clear than normal.

Remember, tooltips are meant to show tips, and lengthy content is no longer a “tip.” If you need to communicate extensive information, then use other formats.

If possible, hire a UX writer or copywriting expert to ensure that tooltips are written with the user in mind.

Trigger tooltips contextually

Be careful with how and when you’re showing your tooltips.

If you don’t want your tooltips to be hated, then don’t interrupt your users with tooltips that aren’t related to what they’re doing.

That’s why you should trigger tooltips based on user actions, so they’re only shown when the user needs them.

Plus, with segmentation, you can group users according to their needs, product usage, user journey stage, roles, and more. And then show tooltips consistently to users who will actually benefit from specific functions and roles.

For example, it doesn’t make sense to show tooltips for advanced features to users who haven’t adopted the basic features yet—so be mindful of who is going to experience each tooltip.

Show one tooltip at a time

A big mistake is to forget that users are humans. We need time to digest information and get habitual to the app.

When you abuse tooltips to bombard information to the user, they’ll quickly feel overwhelmed and fatigued with too much stuff going on—making them more likely to close everything and even churn.

So, use one tooltip at a time, with nice pacing, and focus on only one tip.

Just check Zoom’s new feature tooltips. They’re shown simultaneously, overlap with each other, and the UI doesn’t tell you which feature to check first—so you easily ignore it.

Show progress indicators

We told you the copy for your tooltips should be extremely concise and clear.

However, you can get away and show more information with a progress indicator.

For a feature with a multi-step process, you can add a sequence of tooltips for each point, and the progress bar will make the user feel accomplished and improve task completion—which is also a form of gamification.

Allow the user to dismiss the tooltip

Even if you try your best to show the right tooltip to the right person, sometimes they’ll just want to skip it and close it.

So if you don’t want to annoy users and look spammy, always add a clear skip button so they can dismiss the whole sequence if they wish to. Just like in this example:

Do not invade the screen or block important elements

Another big UX design mistake is showing a tooltip that takes the whole screen or overlaps with another graphical user interface.

When tooltips block the content they’re related to, users have to repeat steps (for example: move their mouse to close the tooltip, read the information or field again, and hover to reveal the tooltip).

See how the tooltip below makes it harder for the user to write a message by blocking the first line. The user cannot really understand what the tooltip is supposed to explain.

Use color contrast to make your tooltips stand out

If you want your tooltips to draw the user’s attention, use color contrast so they’re easier to catch and read (especially for those with some visual impairments).

Use color, shape, space, and other design elements to increase contrast.

For example, you can use a dark box if your background is light or a light box if your background is dark. Just like in this Airbnb example:

Use arrows

Believe it or not, shaping your tooltip with an arrow is necessary so users can identify which elements you’re referring to.

Just like in this example from Slack, you might have multiple icons on one side of your UI. Thus, using tooltip arrows and a highlight box makes it clear as water what your tooltips are trying to explain.

Embed videos inside your tooltips

If it’s impossible for you to explain everything inside a tiny box, then you can take your tooltips to the next level by embedding a short video.

Videos are not only more engaging and interactive, but they also ease the learning curve and can fulfill the purpose of your tooltip better.

There’s a caveat, though, you also need to design your videos so every detail can be seen without having to use fullscreen—or else, your users won’t grasp what you’re trying to say.

For example, you can see how Monday embeds short videos inside their tooltips to showcase features instead of using words.

Test, analyze, and improve

Unfortunately, not every tooltip will perform as well as you’d expect.

You must continually test, analyze, and iterate different methods, designs, and messages to improve their performance.

You don’t have to risk a lot, though, you can use customer success software to create flows with different versions of your tooltips, and A/B test them on small user samples, set a goal, analyze the performance, and then use the best variant on the rest of your user base:

When are tooltips NOT a good idea and lead to poor UX?

Tooltips are neither a silver bullet nor the best route for relaying critical information that a user needs to refer back to frequently.

Typically, they don’t work well when:

• They contain vital information that’s essential to understand the product. As tooltips disappear and users might not always trigger them, they might miss them.
• They show redundant information. Just like this hilarious example:

• They’re shown repeatedly for an action the user has to do over and over again. Users will get annoyed for seeing the same message multiple times.
• Showing important resources like infographics, video tutorials, or any content the user might need later. Any media you include with your tooltips should be specifically made for it and not taken from your resource center, as they’re formats with different purposes.

The lesson boils down to this: you shouldn’t use tooltips where they aren’t needed.

It sounds obvious, but many SaaS companies make the mistake of overcomplicating the user onboarding process with tooltips when they have fundamental design issues to contend with.

How do you create tooltips?

Despite tooltips being one of the simplest UI elements, creating tooltips often becomes a frustrating experience or a drain on scarce developer resources.

So let’s go over each option you have for implementing tooltips without much stress:

Code from the scratch

Although this is the most complex option, if you’ve got strong development skills (or have a developer you can call on), using Javascript will give you the most autonomy to design, create, and customize tooltips as part of your product tours.

However, if you code all your tooltips from scratch, each one will require about this much code:

Now imagine writing this for each tooltip inside your product. It can be a lot of work for devs who are already rather busy. And not only that, think of all the engineering work they could invest in your product with that time.

Worse, whenever you want to change something minor—like changing the color from brown to blue—you’d have to dive through the lines of code to find the right place to edit.

It might sound stressful, but maybe your devs have loads of time, and they don’t mind investing time in implementing tooltips.

Leverage open-source code

Another way to add tooltips to your product is to leverage open-source tools.

If coding seems too tedious, various open-source libraries can lift some of the weight off your shoulders. Some of those are:

• Intro.js
• Shepherd.js
• Crumble
• React Joyride

The con is: they require a little bit of technical knowledge.

If you look at the examples and follow the steps presented on each site, both will help you create tooltips for various use cases.

However, open-source tools are usually not customizable, so you’ll struggle to find tooltips that blend well with your UI and branding and have a modern design. Plus, it won’t save you any time when it comes to editing the tooltip to make it fit your expectations.

Build tooltips code-free with Userpilot

The fastest way to launch tooltips for your users is to use a trusted no-code tool like Userpilot.

With tools like Userpilot, non-technical product marketers no longer have to run to their devs whenever they want the slightest changes to the customer experience.

With Userpilot, though, you can:

• Create a sequence of tooltips, interactive product tours, and feature walkthroughs.
• Have access to pre-built templates with modern designs and easily customizable.
• Easy to edit and change colors or sizes.
• Embed videos and images into UI patterns.
• Make tooltips trigger for any on-page event and target a specific audience, domain, or web pages, and set priorities.
• Track performance and analyze the results to understand how your users interact with them.
• A/B test different tooltip iterations at high speed and conducts more product experiments.

Wrapping up

Tooltips are essential to building interactive product tours, onboarding new users, and driving upsells.

And after reading this page, you should be able to:

• Recognize what tooltips look like
• Understand what tooltips are used for
• Apply the best practices for a better user experience
• Avoid the time sink of building tooltips from scratch
• Choose software to help you create tooltips code-free

If you want your customers to appreciate your service and stick around for longer, you should book a Userpilot demo to implement these best practices without relying on devs!