Tooltips: How to Create and Use Them Like a Pro

What Is A Tooltip?

Tooltip is a UI element that enhances the user experience and journey. It’s one of the most popular on-screen onboarding and user engagement tools. 

In simple terms, it’s a small in-app message that points to another UI element, like a button or a dashboard. 

Something like this:

Websites and apps can feature single tooltips or a series of tooltips for different use cases throughout the user journey. 

Regardless of their use cases, each tooltip aims to interact with (potential) users and communicate value to them.

But before diving into the use cases for tooltips, let’s clear one more thing:

Tooltip vs Pop-Up Tips

A tooltip, as we’ve just said, is a short in-app message about a certain element on the UI. It provides an explanation, contextual information, or guidance to the users. 

A pop-up tip also does a similar thing. It communicates with the user within the product and provides information about a particular feature or UI element. 

However, what sets them apart from each other is their designs and copies.

A tooltip provides information about one UI element and it highlights and demonstrates that element very clearly. You can see that through the position of the tooltip and the selection of the area. 

Whereas a pop-up tip (which is sometimes called a hotspot or an announcement modal) doesn’t clearly –and physically– refer to a UI element. It mostly covers a bigger and central area on the UI and it can be about many things at the same time. 

For example, a pop-up tip might welcome new users by providing them with a list of common use cases for each feature during the onboarding. 

Like this example from Evernote:

Whereas a tooltip would only explain one of them at a time and it would be physically attached (or at least closer) to the feature it explains.

Like this example from Miro:

What Is A Tooltip Used For?

Now that you know what is –and is not– a tooltip, let’s continue with its use cases👇🏻

User Onboarding

Tooltips can be very handy during user onboarding. 

You can create interactive flows, guides, or walkthroughs with tooltips. This way, you can help your first-time users navigate through your app with ease.

Tooltips can also make the learning process much easier and reduce possible user frustration for your users. All you need to do is choose which features you want to highlight in your product tour and create tooltips for them. 

Contextual Guidance and Help

Tooltips provide help right when and where users need it. They offer instant explanations without making users leave the app, which keeps users focused. 

Tooltips, especially when they’re click-triggered, do not irritate users as they are small and relatively less distracting. This makes them perfect for staying constantly visible on the UI, compared to more transient elements like hotspots.

In other words, tooltips are small, essential aids that provide crucial support just when your users need it.

Feature Updates and Reminders

Tooltips are perfect subtle feature reminders, as well.

Shiny announcement modals and hotspots are great after the first release. However, you cannot keep popping confetti for the same feature for a very long time. 

After some point, you need to tone it down. 

And this is exactly where tooltips take over the job. 

With tooltips, you can continue to promote your new features or remind the less used ones. 

Upsell And Add-On Promotions

Another way to utilize tooltips is to highlight premium features that are not included in the user's current plan. 

By explaining the value and use cases of these features through tooltips, you can encourage users to explore paid options and drive additional revenue.

Or, you can also explain the additional benefits they would receive by upgrading. For users about advanced capabilities available in a premium plan. 

The aim here is to engage with the user and pique interest in considering an upgrade or add-on without being intrusive.

And tooltips are the very thing for that.

Tooltip Best Practices: DO’s and DON’Ts

Just as medications won't cure an illness unless taken as prescribed, tooltips won't be effective unless designed correctly.

To get the results you expect, you need to know how to use them properly.

Here’s what you should and shouldn’t do with your tooltips:

DO Offer Value

Just because tooltips are relatively small and less distracting than other UI elements, it doesn’t mean they can’t get annoying for users.

And, actually, they do get annoying really easily when overused.

Each tooltip you create should offer real value to users and enhance their overall experience.

If you use tooltips even for very obvious features/buttons or trigger them randomly at irrelevant moments, users will start to ignore them and miss out on the actually important ones.

Always ask yourself:

• Does it improve the UX?
• Does this tooltip provide any information that is useful for the user?
• Would the user struggle with navigation without this tooltip?

DO Use Clear and Concise Copy

As the name itself implies, too, it’s a tooltip, not a tool manual.

You cannot –and even if you can, you should not– write long explanations in tooltips.

Successful tooltips have short and well-formatted microcopies. If you have lots of information you want to share, you can:

1. Create a set of tooltips and divide the information,
2. Incorporate links to your blog posts and help articles,
3. Use visuals like videos or gifs instead of long text walls.

And if you really need to explain everything in one tooltip, then you need to format it in a way that increases readability. For example, you can:

1. Use numbered lists or bullet points,
2. Highlight main ideas with italics and bolds, 
3. Increase white space around the copy and make it look less crowded,
4. Create color contrast between the background and the tooltip. 

Notion is a good example for this case:

Nevertheless, whenever possible, choose a concise microcopy over a lengthy one.

DO Mind the Tooltip Design and Product UI

The design of a tooltip can change your user and customer experience, instantly.

The size, the placing, the background dimming, the visual cues around the tooltip… 

Your tooltips and product UI should be in perfect harmony, not overshadowing each other but seamlessly complementing each other.

We are saying that it’s not a competition in which UI element will get the most attention.

During the tooltip design process, you should make sure to:

• Use interactive elements when necessary,
• Optimize timing and placing of the tooltip,
• Make use of visual cues such as arrows and icons, 
• Highlight what is important and dim what is not,
• Keep any UI element that is relevant to the tooltip visible.

DO Consider Timing and Trigger Methods

There are mainly 3 methods to trigger a tooltip. You can activate your tooltips when:

• The user clicks on a trigger,
• The user hovers over a certain area,
• The user has spent a certain amount of time or scrolled through a specific percentage of the website.

Depending on the use case and copy of the tooltip, you can prefer one method over another.

For example, clickable tooltips are good for onboarding guides and walkthroughs. Whereas time automated tooltips are good for value proposition reminders.

DO Offer Personalization Based On User Segments

You can't trigger the same tooltip for every user at every stage of their journey.

This means you need to personalize your tooltips according to user segments.

At least some of them.

For example, you can create tooltips to promote add-on features for your regular users. However, that type of tooltip might not resonate with a ghost user, who isn’t fully utilizing the features they already have.

For that user, a more practical approach would be a use case reminder tooltip that highlights the features available in their current plan.

DON’T Use for Crucial Information

Tooltips offer great contextual guidance, really. 

But they’re not official product communication channels where you share crucial information that, if ignored or overlooked, could lead to account suspensions or billing issues.

Because tooltips might:

• Disappear before user completes reading them,
• Or easily go unnoticed.

Even if users notice and read a tooltip, they might not be able to find it again when they need to check the information at a later time.

DON’T Interrupt Your Users

The main reason why you offer interactive tooltips and in-app guidance to your users is to ensure they try your product out themselves, right? 

Product-led onboarding over traditional sales-led processes.

However, if you don't provide an option to exit your guides or tooltips and instead overwhelm users with interactive elements at every turn, you deny them the freedom to navigate the application on their own terms. 

This approach can frustrate users rather than enhance their experience.

You should NOT:

• Design tooltips with no exit, hide, or skip buttons,
• Trigger your tooltips in the middle of user actions, such as setting changes,
• Take your users onto grand product walkthroughs when they’re using a feature.

DON’T Invade the Screen

Some tooltips literally take up the whole screen and cause users to miss out on important information or elements.

And that is a problem, as you can guess.

You want to improve the UX with the tooltip you offer. Not to make the whole UX about one singular tooltip.

If a tooltip is clearly blocking an area that a user might want to see and utilize at that moment, then it’s not providing much value to the user. On the contrary, it steals value from them. 

Here’s an example of this case:

Here, you can see that the tooltip is poorly positioned and obstructs an important area of the interface where users are meant to write their replies.

DON’T Overlook Your Brand Image

Depending on your specific brand voice and image, you might need to make your tooltips appear in a certain way that serves your brand.

Just as readers expect a book cover to align with the content in terms of themes, images, fonts, and visuals, users expect UI elements –tooltips in this case, to be consistent with the overall brand image and product design.

👉🏻 Do you have a colorful UI? Your tooltips cannot be simple black-and-white boxes.

👉🏻 Do you have an edgy tone in your social media and blog? Your tooltips cannot have a boring and robotic copy.

👉🏻 Do you have a professional and distant company image? Your tooltips might not tolerate cat gifs or unicorn emojis.  

Canva achieves this consistency with its unique tooltip design:

Tooltip Design Examples

Tooltips are everywhere for those who are looking to see and learn from them.

Good ones, bad ones, doing okay but could be better ones…

But here are some of the good ones 👇🏻

Grammarly’s User Onboarding Tooltips 

Grammarly creates a demo environment for its first-time users to show how the product works. And for tool feature explanations, it utilizes tooltips and hotspots:

The tooltips explain what you can achieve with the highlighted feature and/or how that feature works:

Key Takeaways:

✅Short and precise copy

✅Color contrast between the background and the tooltip

Phrase’s Product Walkthrough Tooltips

Phrase (formerly Memsource) is a cloud-based localization and translation management system. 

And here’s how it utilizes tooltips:

Key Takeaways:

✅A very clear and conversational copy

✅Limited number of tooltips, focusing only on the important elements 

✅Tooltip guides are triggered from an onboarding checklist 

Intercom’s Feature Update Tooltips

Intercom uses a tooltip in combination with a hotspot to announce a feature update. This way, the announcement will remain non-disruptive and not so annoying to its users.

The tooltip is prompted after hovering above the beacon, which features a link to a bigger modal, explaining the new feature.

Key Takeaways:

✅Tooltip + hotspot combination

✅Using the tooltip only for short announcement message and keeping the details for the link

Discord’s New Feature Tooltips

Discord announces its new features or updates with tooltips, as well. 

Here are not 1, but 2 examples:

Key Takeaways:

✅A summarizing title + short explanation combo –very skimmable copy

✅Fun and engaging visuals –consistent with the brand image 

✅Actionable CTA usage

How to Create Tooltips?

There are mainly 3 ways you can use to create tooltips. 

1. You can use no-code 3rd party tools and save a lot of time, as well as effort,
2. You can use design toolkits that simplify coding processes but still require some coding,
3. You can go old school and code your own tooltips with HTML, CSS, or Javascript. 

Let’s go over each method one by one.

The No-Code Way: UserGuiding

UserGuiding is an easy-to-use, no-code product adoption and user onboarding platform.

With UserGuiding, you can create tooltips to:

• Guide your users through the Product UI,
• Explain features, buttons, and icons,
• Announce new updates,
• Communicate product value and remind unused features –or more!

Here’s an example product walkthrough created with UserGuiding (and tooltips, of course):

And it’s very easy to create a flow like this. 

• First, choose your tooltip design.
• Select the area you want to highlight.
• Write your tooltip copy. 
• Save it, and you’re done!

Just like this:

‍

UserGuiding allows you to customize your tooltips with:

• Visuals, videos, and gifs,
• Links,
• Buttons, 
• And your own brand colors. 

You can also personalize your tooltips by inserting user attributes!

🚀Try it out yourself 🚀

The Low-Code Way: Bootstrap and jQuery

Sometimes, you don’t have the budget for an external, paid tool; and you don’t mind spending a little bit more time and energy on your tooltip projects.

In those cases, design toolkits and libraries like Bootstrap and jQuery can be a real lifesaver.

They require a little bit of technical knowledge. 

But if you look at the examples and follow the steps on each site, both will help you create tooltips for various use cases that you can customize and place wherever you want.

The DIY Way: Javascript, HTML, CSS

Now, for certain reasons, you might want to have really specific tooltip designs for your product.

The box and button shapes, the colors, the placing… 

Then you need to get crafty and code each tooltip separately with Javascript, HTML, or CSS;  and put them on your product’s source code.

This method gives you infinite creative freedom. 

However, this approach can be both costly and time-consuming, given the workload it places on your developers. 

Additionally, frequently updating tooltips using these methods can be impractical. If quick updates are crucial for your project, this might not be the most efficient solution.

To Sum Up…

A tooltip is a perfect, versatile UX pattern.

You can use it for onboarding, user education, feature adoption, add-on promotion, or even updates and announcements… 

If you know how and where to use tooltips, they can really enhance your UX. 

Plus, there are many ways to create them, giving you flexibility in design, use cases, and implementation methods.

So, go ahead and choose the option that best suits your product and needs, and get started with your tooltip game already!