12 (Unbelievably) Good Tooltip Examples and Best Practices

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 good tooltip example:

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?

No-Code Tooltip Examples

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.

HTML and CSS Tooltip examples

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. 

8- Map pointer tooltip

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

9- Animated tooltip

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

10- Clickable element tooltip

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

11- CSS-only simple tooltip

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

12- Laser-effect tooltip

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 – they're actually extremely helpful.

If you want to create tooltips for your business that emulate the examples we shared in this blog post, you've basically got two options. You could create them yourself with HTML and CSS, but do you have the time and resources to do that at scale?

Your other option is to use a tool like UserGuiding that will let you create tooltips in minutes, without having to code.

Feel free to have a play around with UserGuiding without having to pay anything and see if it's a fit for you.