Tooltip UI Design: Best Practices, Examples and Application in SaaS

Although most SaaS businesses understand that tooltips are an important part of an effective onboarding system, designing the tooltip UI correctly is often a challenge.

How do you ensure that the tooltip appears when users hover over it? What should the descriptive text say? Where’s the line between a helpful tooltip and just creating unnecessary friction?

This article will answer these questions and others like it. We’ll draw on our experience working with hundreds of SaaS companies to share some tooltip best practices with you.

Let’s get into it.

TL;DR

• A tooltip is a short section of text that pops up to explain a particular UI element after you hover over it.
• Tooltips can be used as a standalone UI element, or as a part of a larger flow of UI elements bundled together.
• Common use cases for tooltips in the SaaS world include user onboarding, upsells, new features, and product tours.
• If you’re going to use a tooltip, make sure that the guidance it offers is genuinely useful and doesn’t obscure the UI element it’s explaining.
• Don’t forget to offer different tooltips to different user segments, depending on their respective needs.
• 3 companies that have mastered tooltips are Facebook, Slack, and Ahrefs.
• Userpilot offers software that will let you build tooltips without needing to code.

What is a tooltip?

A tooltip is a short section of text that is linked to a particular UI element inside your product.

It exists to explain how that UI element works, which is particularly useful when the feature in question is unintuitive or new.

On desktop, tooltips are normally programmed to appear when the customer mouses over the active element in question. By contrast, on mobile, tooltips generally appear if the user taps and holds the element.

This difference means that tooltips are a bit harder for users to find on mobile devices, which is a nuance you should keep in mind in your design process.

What components does a tooltip contain?

Although each tooltip is different, there are a few standard ingredients that you see almost all the time.

There’s a little arrow pointing to the element that the informative message in the copy is referring to.

There’s the copy itself, which is normally short and to the point. In web design, this is sometimes referred to as a “tooltip label.” Typically, tooltip labels include a title that’s in a header font.

If the tooltip is part of a larger experience flow, such as a product tour, there might be a progress bar to indicate how many steps the user still has to go through.

Last but not least, there’s an “X” in the top-right corner so that the user can get rid of the tooltip once they’ve read it.

Few things are more annoying than a UI element that you can’t get rid of once you’re done with it, so don’t skip this!

What are the two types of tooltips?

Design-wise, there are two types of tooltips. Userpilot offers the opportunity to create both types.

There’s the standalone tooltip, which functions as a complete user experience in its own right without needing any additional elements.

That makes standalone tooltips perfect for explaining one ambiguous product feature.

At Userpilot, we call these “native tooltips,” because they effectively become part of your native UI.

The alternative is a tooltip that’s part of a larger experience flow, such as the ones you commonly see in interactive walkthroughs.

Here, it’s common to see 3-4 tooltips stacked together in a sequence, taking the customer through the most important features of your product for their particular use case.

Just make sure that you alternate your tooltips with other UI patterns such as hotspots and modals. Otherwise, your user will get sick of tooltips very quickly!

To read more about some of the problems that occur if you use too many tooltips at once, this article about Pendo is well worth a read.

Common tooltip use cases in SaaS businesses

Since the tooltip is so versatile, how you use tooltips in your particular business is ultimately only limited by your imagination.

That being said, there are some typical situations where tooltips are used.

User onboarding

If you define onboarding as “educating your customer to get value from your product,” it’s easy to see how getting guidance from a tooltip would help with that.

Consider this example from social media scheduling tool Kontentino, where they use a tooltip to show their users how to connect a social media account:

This is followed by a second tooltip explaining how to schedule a post:

After completing these two steps, the user has now activated. Simple.

To read how Kontentino was able to build these tooltips without using code, click here.

Product tours

You can think of a product tour as a series of tutorials and basic tasks given to each new user of a particular product.

The specific walkthrough that an individual user receives will necessarily depend on their individual product needs. Otherwise, your product tour will be too linear and bore your customers to death!

Tooltips are very commonly used in product tours as a way of highlighting key features from an onboarding checklist.

(https://userpilot.com/blog/interactive-walkthroughs-improve-onboarding/)

For example, this is a checklist used by Rocketbots as part of their product tour:

Note that one of the tasks is “Connect a channel.”

And here’s a tooltip pointing out how to do exactly that:

Upsells

It’s in the interests of all SaaS businesses to maximize Lifetime Customer Value, and upselling bonus features is one of the best ways to do that.

Rather than marketing upsells by email, it’s more effective to use tooltips inside your product. (Yes, tooltips are a product marketer’s dream!)

Here’s an example of a tooltip being used to sell multichannel prospecting ads:

The blue tooltip only appears when the user interacts with the white modal.

New features

Contrary to popular belief, onboarding is not something that should end once the customer has activated.

The best SaaS companies see customer education as a never-ending process and are more than willing to provide tooltips to show off relevant secondary features.

Here’s an example of Spotify using a tooltip to highlight a more complex technical feature on mobile:

Now that you’ve seen the various applications of tooltips in the SaaS world, let’s look at the best way to go about designing them.

Tips for optimal tooltip UI design

Is a tooltip necessary?

Before you read the rest of these tips, pause and reflect on whether a tooltip is really the best answer to your design problem.

If the information that the tooltip text shows is essential for the user to understand in order to use your product, it might be better to print it on the screen, instead of putting it in a tooltip.

That’s because users won’t always mouse over your tooltips, and we want to make it as easy as possible for your customers to use your product.

For the same reason, it doesn’t make much sense to print a success message on a tooltip. You want your user to feel a rush of dopamine… but then you’re risking them not finding the tooltip in the first place?

Modals are a better choice for most success messages.

Finally, do ensure that your tooltip provides information that is genuinely helpful, and doesn’t just double what’s already on the screen.

If a button says “Yes,” and then has an additional tooltip saying “I agree,” that seems like a waste of time for your product team and your customer alike.

Tooltip placement

Tooltips should always be placed near the UI element that they are describing, usually opposite the little arrow.

Of course, “near” doesn’t mean that your tooltip should obscure the element it’s supposed to be helping your customer understand.

Far from being helpful, a tooltip like this would end up being perceived as an annoyance.

Placing one tooltip in a given location is plenty. If you cluster too many tooltips around one element, the user will get overwhelmed.

The only exception to this is if you have a sequence of multiple tooltips that form part of a product walkthrough.

But even then, 3-4 tooltips in a row should be considered the absolute limit, and it would be better to break those up with other UI patterns such as hotspots, driven actions or modals.

Make your tooltips easily discoverable

There’s always a risk with tooltips that the user doesn’t find them.

So it’s your job to create tooltips that are easy to see, without dominating the UI to the point that they become annoying.

One of my favorite ways of doing this is using subtle “i” icons, like this:

It’s fairly intuitive to mouse over the icon, and when the user does this, the tooltip will appear.

Another good tip is to use rich colors to make your tooltips easy to see against light or dark backgrounds.

Don’t show the same tooltips to the same users

One of the most common errors I see companies making in their user onboarding is to assume that all their customers have exactly the same needs.

Imagine that you’re an accountant working inside a new project management tool, and you see a tooltip showing you how to structure your employees’ tasks in a more linear way.

Since it doesn’t affect your financial work, you don’t care. To you, this tooltip is just unnecessary friction.

If your users discover that you don’t care about their specific use case, they will churn in no time.

The way to solve this problem as a SaaS business is by segmenting your users according to their respective individual needs.

Software like Userpilot will automatically deliver different tooltips to each segment, so you won’t need to worry about doing that manually.

For more on how to segment your customers, consider reading this post.

Don’t use code to design tooltips

If you’re the sort of SaaS executive who believes that your business is completely unique, there might be a temptation to code all your tooltips from scratch.

After all, since what you’re attempting to solve has never been solved before, you need a bespoke solution, right?

I’m here to tell you that this kind of thinking will cost you a lot of time and money.

Look at how much code is needed to create a simple tooltip:

Now imagine that your dev team is not only building multiple tooltips like this, but maintaining and editing them as well — instead of working on your product itself.

A far better solution is to use onboarding software like Userpilot, which will let you build tooltips in your browser code-free.

That will free up your devs to do the heavy-duty engineering work they were hired to do, as well as empower your non-technical product marketers to create and iterate tooltips in a few minutes.

For more information about onboarding software, check out this article.

Design with accessibility in mind

Finally, remember that not everyone browsing your product will do so in the same way you do.

Consider allowing users to discover your tooltips by hovering with their keyboard (often by using the tab key), as well as with their mouse.

Additionally, you should take into account the needs of blind users who will peruse your product by means of a screen reader.

A full exploration of this fascinating topic would go beyond the scope of this article, so readers who are interested should go here to learn more.

Examples of good tooltips

Let’s put our new knowledge into practice by seeing how 3 top companies use tooltip best practices in their businesses:

Tooltip UI example #1: Facebook

It shouldn’t come as a surprise to anyone that Facebook has mastered the art of psychologically appealing UI.

Older Internet users will remember the days when the only way to react to Facebook content was by leaving a like.

When Facebook released the option to react in more nuanced ways, they needed to use tooltips to explain this change to their older user base.

Here’s what they created:

Reasons why this is a great tooltip:

• It’s not immediately obvious to users where the other types of reactions are located.
• The blue tooltip is immediately obvious against the light background.
• The word “New!” in the copy grabs your attention.

Tooltip UI example #2: Slack

Imagine that you’re working on a team that’s spread across multiple different time zones.

You have an urgent message to send to the product team in Australia, but it’s 4 am their time, and you don’t want to be known as “the guy who sends pushy messages at night.”

Slack has a tooltip with the perfect solution:

Reasons why this is a great tooltip:

• It only appears when you’re about to contact someone during hours when they’re most likely in bed.
• It’s right next to the “send” button. Perfect placement.
• The headline condenses all the values of this feature into just 4 words.

Tooltip UI example #3: Ahrefs

Ahrefs is a very complex SEO tool with a lot of depth, so it’s fair to say that it attracts a fair number of advanced users.

Those advanced users want to see more than just basic features such as domain authority or the number of backlinks.

So it makes sense that Ahrefs uses tooltips to highlight secondary features like this:

Reasons why this is a great tooltip:

• It grabs your attention by obscuring the main part of the UI, while still keeping the feature it’s pointing to visible.
• It will only show up if you’re a more advanced user, rather than someone who’s on Day 1 of their time on the product.
• It’s beautifully branded in Ahrefs colors.

Conclusion

Tooltips are a phenomenally versatile UI design tool with tons of applications in the SaaS world.

Now that you’ve read this post, you should be able to:

• Recognize the different types of tooltips and their constituent parts
• Reflect on some use cases where tooltips might be helpful for your own business
• Design your tooltips in line with industry best practices
• Follow the example of tooltips built by some of the top companies in the world

If you want to build tooltips for your business without having to go through the hassle of coding them, Userpilot is your friend.

Trust me: your non-technical product managers will thank you for allowing them to build tooltips in literally minutes.

For a free trial, click here.