12 (Unbelievably) Good Tooltip Examples and Best Practices

Talking about the Mona Lisa without having seen the Mona Lisa is difficult and absurd.

Likewise, talking about tooltip content without showing any tooltip content would be a big mistake.

In my previous article, I talked about what a tooltip is and how to make effective tooltips.

I wanted to visualize what it should look and act like this time.

For further reference, this is how I expect you to react after reading the article:

We’ll see.

So, let’s begin with the basics, and then dive into the examples:

How to write consistently good Tooltips – 6 best practices

When you look at successful people, you will find that they aren’t the people who are motivated, but have consistency in their motivation.
– Arsene Wenger

1- Use good colors that stand out

If I had to pick only three best practices for the best tooltip design, this would be one of them.

The color scheme and the shape of a custom tooltip catch the users’ eye first.

Here’s what I mean:

Which tooltip looks more friendly?

The purple one is easier to read and seems more professional even though the shape of the two tooltips is the same.

Did you also realize that the black tooltip is blocking some information? That’s also a big no-no. Here’s why:

2- The placing is important

This is the second of the most important three practices.

Would you put a traffic sign in the middle of the road?

No.

Should you place a tooltip in such a way that it blocks other information?

No!

The placing of tooltips can make or break your product, especially for touch devices such as tablets or mobile devices.

Let me show you an example:

tooltip bad UX example — image source: weloveuxd

If there wasn’t a bigger space to click on, I would have stopped using Twitter the second I saw this.

Sometimes, it’s impossible to click on other interactive elements than the tooltip when one is on the screen.

A tooltip is not meant to be a full-screen message. Instead, it’s supposed to be a pointer-hover-triggered button type.

And I’ve seen even worse cases.

That’s not fun. It should be fun.

3- Make it fun

How do you turn a simple tooltip into an effective one?

Make it interactive.

There are two types of tooltips:

1. On-screen tooltips that don’t disappear

2. Mouse-pointer-triggered modern tooltips.

If you already have a lot of screen elements, make sure that the tooltip doesn’t make it even more crowded.

Remember Clippy? The annoying Microsoft assistant that communicated through tooltips?

Assistive technology has improved a lot since it appeared. It doesn’t have to be annoying anymore.

Effective tooltips should be fun. A fun element might not be fun for everyone. Those people shouldn’t churn just because you misused a tooltip button.

4- Use short sentences

The fact that you should keep the tooltip content short is an obvious one.

The tooltip should be small and not cause friction in the user journey.

To do that, you should use short sentences, be clear, and get straight to the point.

What’s more important than the length is:

5- Talk about value rather than function

I mentioned that the color scheme and placing are among the top three best practices of user experience-friendly tooltips, right?

This is the third.

There is already a character limit on how long you can make your tooltip message, so why waste it on the obvious?

Here’s an example:

This tooltip wouldn’t be as effective if it looked like this:

I hope that you get what I mean.

Also, did you notice how the emoji in the first image makes it seem more fun and friendly?

Still:

6- Visuals are not meant for all tooltips

Some tooltips contain emojis; some onboarding tooltips even contain images.

The image makes the instructions more evident in this example.

But if there were an image in a hotspot tooltip*, it would only be an annoying tooltip button.

(*: hotspot tooltips should include a maximum of two sentences and shouldn’t include images)

I believe it’s time that we get to the examples to see all those best practices in action.

12 Examples of Great Tooltips created with CSS, HTML, or No-Code

I tried to cover a wide range of different individual tooltips to inspire you as much as possible.

These products have mastered the User Interface game, from app messages to custom components.

I’ve also categorized the examples according to how they were created, in case you are looking for alternative methods.

So let’s start with the first and most popular method, shall we?

Here I will list some of the best examples of tooltips that others created with 3rd party tools. You should definitely check them all out if you don’t have any coding experience, and want to learn how to avoid common mistakes.

1- UserGuiding

If you know, you know. UserGuiding is a tool that helps you build no-code tooltips and other user engagement elements.

If you are a tool to build tooltips, your tooltips have to be perfect.

Right?

Good thing that UserGuiding understood the assignment.

Why is this a good example?

The text focuses on the value, not the action
The design is simple
The placement doesn’t block any necessary information
The tooltip has interactive elements

2- Zakeke

Zakeke is a product personalization tool, helping its users create 2D and 3D personalized products.

They used a hover-activated tooltip to ensure that users are following all the necessary steps. In their case, the tooltip acts as a necessary guide and not an additional tool.

Why is this a good example?

The tooltip doesn’t block any information on the screen
The text is written in clear language, emphasizing the actions to take
The tooltip can be disabled not to be disturbed every time by the blinking hotspot.
The design matches the website.

3- Genially

Genially is a design platform where you can create interactive content of all kinds.

The tool has a vast amount of use cases and templates.

In other words, it isn’t effortless.

That’s why onboarding new users with interactive tooltips is the best choice.

In their case, it’s normal that the tooltip is bigger than usual. This is because the first steps of onboarding tooltips should usually be bigger to keep the users from getting distracted by the number of different options.

Why is this a good example?

The tooltip is clear and has visual elements
The tooltip has interactive elements
The size of the tooltip matches the use case
The design matches the tool

4- Cuepath

Cuepath is a medication monitoring tool, based in Canada.

Cuepath has both onboarding tooltips and hotspot tooltips, but I wanted to focus on the latter.

That’s because the only function of this tooltip is to draw attention.

The tooltip doesn’t inform about anything, nor is it a mandatory design element.

Yet, it’s a smart way to quickly direct the attention of the scanners (people) to the sign-up form.

Why is this a good example?

It’s an excellent place to use a tooltip
The tooltip highlights the value and not the function
The tooltip draws attention to itself

5- GhostwriterAI

GhostwriterAI is an artificial intelligence tool that helps marketers identify their target audience.

GhostwriterAI has many features, and all those features have more than one function.

Also, they have a complex UI. Therefore, they need to specify which feature they are talking about while onboarding new users.

Just like Genially, they figured that onboarding new users through tooltips was the best way to ensure that.

And they did a good job, considering that they now spend %63 less time to onboard their new users.

Why is this a good example?

The tooltip is clear and has visual elements
The tooltip has interactive elements
The size of the tooltip matches the use case
The design matches the tool

6- BeerOrCoffee

BeerOrCoffe is a platform for companies and people to find the best co-working space for them.

Since BeerOrCoffee is a new tool that is improving, they constantly have to announce new features and updates.

So instead of bothering their users with big modals every single time they open the tool, they decided to automate the process with tooltips.

Why is this a good example?

All the tooltips have short texts
The use case of the tooltips is smart
The tooltips don’t block any necessary information
The design matches the tool

7- Plandisc

Plandisc is a calendar tool that helps you organize your whole year on a circular calendar.

They chose to embed the tooltip into a blinking hotspot. This way, the tooltip doesn’t cover a lot of space on the screen, and doesn’t bother the users that don’t like tooltips.

Why is this a good example?

The text on the tooltip is short and simple
The message focuses on the value
The tooltip is placed correctly
The tooltip has interactive elements
The color of the tooltip matches the style of the tool.

Here I will list some of the most inspiring tooltip examples created with HTML or CSS. I will also include the sources, just in case, for you to adopt them.

I wanted to start the list with my favorite CSS tooltip. Unlike other open-source tooltips, you can use JavaScript to integrate this one and customize it as you want. You can use the pointers in any context without disturbing the users’ eyes.

Why is this a good example?

The design is unique and simple
You can add images
Serves for a range of purposes that most users are accustomed to
Could replace long product tours

Language: JavaScript, HTML, CSS

Source: codepen.io/Animated Map Pins

Next on the list is a simple, yet eye-catching tooltip example. This funny little friend of ours makes its little dancey-dance to ensure users follow it. This tooltip is definitely not the best choice for product tour tooltips, but it can be better than plain hotspot tooltips.

Why is this a good example?

The design is simple yet eye-catching
It can be great for announcements or highlights
It’s customizable

Language: HTML, CSS

Source: codepen.io/Animated CSS Tooltip Concept

This ”icon click” tooltip has a lot more to offer than only giving information. You can use it as a checklist, a home button, and a built-in toolbox for your website, just like a navigation button on mobile phones.

Why is this a good example?

It’s an interactive element
The design is both simple and stylish
The size is not too big
It has a wide range of use cases

Language: HTML, CSS

Source: codepen.io/CSS Tooltip On Click

I had to include at least one regular tooltip example in this list, and here it is. Just change the colors, images, and text, and it will be ready to use on any website.

Why is this a good example?

You can include images
The design is UX-friendly
It can match almost any website

Language: HTML, CSS

Source: codepen.io/CSS Only Tooltips

This is one of the most fantastic tooltip designs I have ever seen. If your website has a minimalist design or wants to keep the tooltips as minimalist as possible, this CSS tooltip was made for you. However, this tooltip won’t stand out as much as necessary if you have a complex UI with a multi-color palette.

Why is this a good example?

The design is out of the ordinary
It’s simple yet stylish
It’s customizable

Language: HTML, CSS

Source: codepen.io/Tooltip Laser Line Effect

Conclusion

Tooltips are not hard to make – if you know how to create them easily.

They are also not bad for UX – if you know how to use them correctly.

Tooltips are not outdated. On the contrary, they are admiringly helpful.

Here I listed 12 best examples and six best practices to prove my point. So, do you agree with me, or do you still not like tooltips?

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

Frequently Asked Questions

What is a good tooltip?

A good tooltip is radiant, well-designed, has a short text, and is placed correctly. To make the tooltips even better, you can also make them mouse hover-triggered, and interactive.

Does Screen Reader read tooltips?

Many tooltips are screen-reader-friendly, depending on how they were made. If you want to make the tooltips more accessible, find more information here.

What can I use instead of tooltips?

You can use modals, hotspots, and in-app messages to replace tooltips. However, sometimes that won’t be as simple and effective as tooltips.

How long should tooltips be?

A tooltip text should be short, no longer than 140 characters. However, the length of the text can also depend on the positioning of the tooltip.

12 (Unbelievably) Good Tooltip Examples and Best Practices