Tooltips: How to Create and Use Them Like a Pro

Picture me this:

You are driving in a country you’ve never been to, and even though you can make out some of the traffic signs, you obviously get confused.

And before you even realize it, you are in the wrong lane, driving against the traffic.

What if I told you that tooltips are what traffic signs are to drivers to your users?

Without tooltips, your users can somehow still manage because they probably know how most software functions.

But will they really know which lane to take?

Let’s not leave you guessing, and today, let’s take a look at:

• What tooltips are,
• Why they are important to your user experience,
• Some do’s and don’ts of tooltip design,
• Some tooltip best practices, and
• How you can start creating your own tooltips

Don’t have the time? Here’s the TL;DR ⬇️

Ready? Let’s go:

What Are Tooltips?

A tooltip is a UI element that is commonly used in websites and platforms to enhance the user journey and guide users where they need to be. Being one of the most popular on-screen elements of onboarding and user engagement, websites and apps can feature simple tooltips, series of tooltips, single tooltips, or tooltips as interactive elements of a user journey.

But what a tooltip essentially is can be defined by the element’s design.

In short, if it is a small in-app message pointing at another UI element, it is a tooltip.

Case in point ⬇️

Remembering my little traffic metaphor above?

You can be sure that the absence of tooltips or any other in-app communication element can cause great confusion for users.

But when you use them the right way, they can be formidable for your platform and UX design.

Yet another important question is:

What Is a Tooltip Used for?

Tooltips – be it an onboarding tooltip or any other contextual tooltip – have a wide range of use cases, and they can be adjusted to each use case depending on their purpose.

Still, the most common use cases of tooltips are:

👉 User and customer onboarding, user engagement, and other in-app messaging purposes like in-app marketing.

Moreover, tooltips can be incorporated inside:

✅ Product tours,

✅ Hotspots,

✅ Walkthroughs with interactive content,

✅ Form fields and more

So basically, different types of tooltips can be a tool for many different user interactions, and the user experience with tooltips can have a big impact on the overall user and customer experience.

But are tooltips really good for user experience?

Are Tooltips Good UX? 🤨

The answer is yes.

But only when they are used the right way.

👉 A tooltip is as good a user experience element as you make it out to be.

If you design it wrong, prompt it at the wrong time, at the wrong places, and then fail, that doesn’t mean it was a bad user experience element.

It means you did it wrong.

Good use of tooltips as user experience elements need to:

👉 Be designed with the overall UI design in mind,

👉 Feature short, concise, and meaningful copy,

👉 Be prompted when and where relevant and appropriate,

👉 Feature visuals and engaging emojis if relevant to the brand,

👉 And most importantly, offer immediate or long-term value to the user

Let’s elaborate on these a little:

Tooltip DO’s and DON’Ts – Worst & Best Practices

1- Do offer value to customers ✅

Out in the wild, some tooltips are literally used for nothing.

The tooltip is prompted at irrelevant moments, and the tooltip content is filled with information that is either very obvious or with something that could have been an email 🙄

Here’s the thing:

If your tooltips don’t offer value, users will start to ignore them and miss out on the actually important ones.

Kinda like the boy (or bot 🤖) who cried wolf situation.

If you alert users for nothing using extra-UI elements, they’ll become numb to it in no time.

Keep one thing in mind:

You don’t use tooltips just to increase engagement but also to provide a better user experience.

Take Figma, for example ⬇️

They keep the tooltip pretty, the contents short and valuable, and the overall experience fun.

That’s what you’re going for.

2- Do use clear and concise copy ✅

If your tooltip copy is long, there is a good chance no one will read it.

And I mean it.

We, as human beings, are programmed to automatically prioritize tasks at hand.

And if a new, long task is raised to our attention, we tend to ignore it.

So, your best bet at actually getting your users to engage with your tooltip, ideally, is to write clear and concise copy ✍️ 

And then go a step further and format it properly to make readability increase.

A well-formatted copy of a well-designed tooltip should:

🟢 Have lots of white space,

🟢 Have an easily readable font,

🟢 Chose a color contrasting the background color for the text,

🟢 Have enough space between lines,

🟢 Be optimized for mobile devices (to be shorter or have a smaller punto),

🟢 Have actionable microcopy and CTAs

Here’s a look at a nearly perfect example from Notion:

3- Do mind the design process ✅

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

For example, if it takes too much space on the screen just to give an informative message, it might be annoying to the users.

⚠️  A traditional tooltip often highlights a specific area of the screen and mostly dims the background, but these might be things you don’t want to do according to the contents of the tooltip you’re designing.

So, try to come up with custom tooltips designed specifically for your needs.

During the tooltip design process, your product team should:

👉 Mind the tooltip content,

👉 Use interactive elements when necessary,

👉 Be creative with the shapes and design if your brand allows,

👉 Always try to achieve well-timed and well-placed tooltips,

👉 Optimize the design for mobile users

For example, we can look at Figma’s mobile tooltip:

4- Do not overlook your brand ❌

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

Be it edgy or professional. 

If you have designed your platform or website to look minimalistic and professional, a tooltip like Canva’s might be a little off-brand for you:

Similarly, if a creative and fun platform like Canva used a basic, traditional tooltip, it might have been off-brand for them too.

👉 The point is to know who and what you are designing for.

Your product, your user journey, your customer base, key features, and your brand voice all play a big or small role in the entire cognitive process of each individual tooltip’s perception.

Keep your brand in mind!

5- Do not interrupt your users ❌

One of the most important don’ts when designing effective tooltips is interrupting users.

Let’s put it this way:

You are a user on a project management platform, you need to go over some tasks, and you are on a tight deadline.

A feature announcement tooltip pops up.

It introduces you to a new feature and offers to show you more of it through a new feature tour.

When you were already in the middle of something and in a hurry 🫥

Then, this happens a couple more times in the span of a week or month (sometimes even a day).

You grow frustrated.

Without even realizing why, you start disliking the platform.

👉 All this hassle and a contextual tooltip like Amplitude’s could be used and keep your user frustration as low as possible:

6- Do not invade the screen ❌

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

And that, folks, is a red flag 🚩

You want to provide a better UX for users when you use tooltips. So, if your tooltips lead to a bad UX, then it’s best not to use them at all.

Here’s an example from Twitter’s old UI:

You can see in this example that the tooltip is blocking the area where users are supposed to write.

👉 Now, the user can’t truly understand what the tooltip is explaining in the first place.

As we mentioned above, you use tooltips to provide better UX; therefore, it’s imperative to avoid anything that will prevent you from doing so.

Now, let’s take a look at some platforms and software that managed to provide good UX ⬇️

Top Tooltip UX Best Practices and Tooltip Examples

As we discussed above, tooltips are UI elements that are essential for a better UX.

👉 If it doesn’t help your UX, you are doing it wrong.

If you know where, when, and how to use tooltips, they can do wonders for your product.

Here are some of the most important use cases of tooltips and how some of our platforms nailed it:

User Onboarding 🧩

A good user onboarding process includes a well-prepared product tour.

And a good product tour has well-planned tooltips.

Here are some good examples of tooltips used in user onboarding:

1- Grammarly

By onboarding users in a demo environment, Grammarly uses tooltips in combination with hotspots (which is a super cool best practice!) and manages to keep it interesting.

Key Takeaways ✍️ 

👉 One great thing about these tooltips is the fact that their design prioritized contrast with the background color not to frustrate users and strain their eyes.

👉 Moreover, the copy is short and concise to make it easier for the user, and each tooltip features a tiny Grammarly logo, which surprisingly does a great job drawing attention thanks to the attraction point it creates.

2- Memsource

Though at first glance Memsource’s product tour seems simple, its tooltip design does a lot more for the users than it seems.

Key Takeaways ✍️

👉 To start with, the copy is simple one-liners, it is well-formatted, and the buttons are designed with good microcopy and color in mind.

👉 Moreover, the progress bar helps users navigate through the experience without getting frustrated.

👉 And lastly, highlighting elements on the screen while dimming the background help users avoid getting distracted.

But tooltips can be used for more than one use case:

Updates and Reminders 🚨 

Tooltips can help you announce new features in the best way possible and at the most relevant point of your user’s journey through your product.

Here are 2 good examples:

3- Intercom

Intercom uses a tooltip in combination with a hotspot to keep it non-disruptive and not-so-annoying for 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 ✍️

👉 The tooltip element’s use is great not only because of the hotspot combination but also because this use makes it possible for the user to choose if they want to learn more about the feature or not.

👉 Moreover, the tooltip triggering the Intercom widget makes it on-brand for Intercom.

4- Discord

Discord’s tooltips are perfect for 3 reasons:

Key Takeaways ✍️

👉 They use a color for the tooltip that very much contrasts the background, making them a center of attention for the users,

👉 The visuals used are fun and really on-brand for Discord which engages their target audience greatly,

👉 The copy and its formatting make the tooltips really digestible and decrease the user frustration rate greatly.

And there is one more common use of tooltips:

HELP! 🗣️ 

Tooltips can be great for help and warning purposes.

But they really reach their full potential when used with one specific UX element:

Hotspots!

Here’s an example from Zakeke:

5- Zakeke

Hotspots are one of the most attention-grabbing elements in an app.

And so naturally, if you add standalone tooltips for users who hover on the hotspots, they become irresistible to read.

Zakeke’s hotspot grabs attention and creates an urge in users to know about the information being displayed:

Since this is an important piece of information, it should remain there constantly instead of being relegated to a pop-up text that users are presented with during a product tour or a feature walk-through.

👉 So, rather than creating a pop-up text, you should add a tooltip to a hotspot because you don’t want to interrupt your users from getting work done.

By doing so, you’ll be solving a problem that users often face.

Thanks to this tooltip added into a hotspot; you won’t have to worry about answering one-off user questions all the time.

👉 You save valuable time, resources, and energy thanks to tooltips!

But the most important question is, then:

How Do You Create a Tooltip?

You can create tooltips for websites, web products, and mobile applications.

They can be native tooltips or code-free tooltips created using third-party tools that require no coding.

👉 There are 3 common ways to create a tooltip.

Let’s take a look at them, starting with the easiest way to the most complex.

1- The no-code way: UserGuiding

UserGuiding is an easy-to-use, no-code user onboarding experience platform.

You can use it to easily create tooltips, along with many other elements like hotspots, user onboarding checklists, and product tours.

Here’s a look at a product tour I created using UserGuiding, in under 5 minutes:

But is it the option for you?

It just might be if you are looking for:

👉 A solution that is quick (you can create a working tooltip in under 2 minutes!)

👉 A solution that is affordable with actually helpful features (analytics, segmentation, targeting, customization, triggers, scheduling, and more)

👉 A solution that won’t require developers (no coding required unless you really want to 👀),

👉 A solution that offers good customer service (9.8 on G2!)

Think it’s the one for you? Give it a try!

Powerful In-App Onboarding without Coding

Save hours of developer time every week, starting from $89/month:

Want a little more hassle but more freedom in designing your tooltips?

Then, you might want to go for:

2- The low-code way: Bootstrap and Jquery

If you want to use another, less complex way to create tooltips that requires some coding, you can try Bootstrap and Jquery.

Check out the links to see how you can utilize them.

Here’s the disclaimer, though ⚠️ 

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.

Now, if you need more than some amount of coding, then you need:

3- The DIY way: Javascript, HTML, CSS

Here’s the option for those who have the money, time, and team to create code.

👉 Out of all three, Javascript is the most complex.

However, if you are a developer or there is a developer that can help you, Javascript will give you more freedom to create and customize tooltips.

Here’s an example piece of code for a standard tooltip written in JS from tutorialspoint:

You should also keep in mind that if you want to use Javascript for creating tooltips, you should be able to update and maintain them at all points.

Now, this is not something you would need to do while using third-party platforms (like UserGuiding) shoulders 🤷 

👉 Compared to Javascript, creating tooltips with CSS and HTML are less complex but still similar to Javascript.

As in Javascript, you should also take time to create, maintain, and update when using HTML and CSS.

To Wrap Up…

Saying that tooltips cause bad UX is avoiding seeing the real problem.

A tooltip is a perfect, versatile onboarding UX pattern.

If you know how and where to use tooltips, they will help you provide a great UX.

Keep in mind that tooltips are mostly about creating efficiency, and they have one simple task:

A better, easier experience for your users 🚀 

Going back to my metaphor in the intro of the article, I hope now you better understand why tooltips are similar to road signs.

Now, it’s your turn to create and customize tooltips to conquer the game of providing the best UX for your users!

Good luck 🍀 

Frequently Asked Questions

Are tooltips good for SEO?

If you understand that SEO is about providing your visitors with the best experience, then you can better internalize the fact that tooltips are great for SEO. When you help your users learn what they don’t know and understand processes, your site will deserve much more to rank higher in the SERP.

Why is a tooltip bad?

A tooltip is only bad if you don’t know how to make use of it. If you don’t provide value with your tooltips or you interrupt your users with tooltips, they will most likely fail to live up to their purpose.  Take the time to do some detailed research about how to use tooltips before you implement them in your apps or website.

What is a hover text?

A hover text is a piece of informational text that comes up on your screen when you hover your mouse over a specific location that is related to the information. 

What is a tooltip?

A tooltip is a UI (User Interface) element that is used in websites and platforms to walk users through it. A tool tip can help you create a more interactive website, which in return increases user engagement and product adoption.