Tooltips: How to create and use them like a Pro

So, you’ve gone on a holiday to a new country that you have never been to, and you are driving on a road where there are no road signs. 

How would you know how to drive on the roads in that country?

Thinking about the cars driving in a very unusual way to you, the pedestrians crossing the roads randomly, and the bikes riding everywhere, tangled roads… you find yourself going in the reverse direction.

It already feels like a chaotic scene in an apocalyptic movie, doesn’t it?

I believe it wouldn’t take too long before any of us, who is used to having road signs, has an accident in such a place.

Honestly, like many other people, I would also either stop driving or go to another country where there are road signs that make me feel safe.

Now, what if I told you that tooltips are to users what road signs are to drivers?

Having this analogy in mind, I should tell you that without tooltips, your users would be left alone on the roads without road signs. 

They would feel the turmoil at a certain point, and they would stop using your app and look for other alternatives.

Let’s further explore what a tooltipWhat is a tooltip? A tooltip, as the name would suggest, is a tip that appears over the navigation button of a tool and explains what the tool can do…. is and its use cases.

What are Tooltips?

Tooltips are UIWhat is UI? A User Interface (UI) is the medium through which a user connects with the hardware or the software. When a user interacts with a hardware or a… small elements that users come across on a webpage or an app when they hover over the other elements of the page. As their name suggests, tooltips give tips about an element or a process on apps or web pages. In other words, Tooltips are text boxes that display a brief explanation of the elements on an app or a webpage.

Looking at the example that I use in the introduction of the article, you can make sure that the absence of tooltips can cause great confusion in users. 

When well-designed and used in the most relevant point without interrupting users, tooltips can be a great weapon in increasing your product adoptionWhat is product adoption? Product adoption is the process where an individual learns of a new product and becomes a user of it, learning what it does, how it does… rate and providing a better user experience.

Are tooltips good UX?

The answer simply is how you make it. 

I am sorry to say this but blaming tooltips for bad UXWhat is UX? UX is the abbreviation of User Experience and refers to an individual’s thoughts and feelings when using a specific product or a service. It aims to heal… is lame.

Maybe I can better explain with this image:

Here are some DOs and DONTs for good UX when using tooltips:

1- Offer value to customers 

Some tooltips are literally used for nothing. When UI elements are clear enough to explain what can or should be done with a universal symbol, using tooltips are of no value to users.

If you don’t offer value, your users will start to ignore tooltips, and they will miss out on even the most important ones. 

Remember! You don’t use tooltips just to increase engagement, but you use them to provide a better user experience.

2- Use clear and brief descriptions.

You should keep in mind that unclear sentences with an abundance of words will be ignored easily. 

You need to know that you are trying to help your users get their work done more efficiently. So, first, you should be the one who gets work done efficiently.

3- Do not interrupt your users.

You should be really careful about not interrupting your users when they are getting work done.

For example, if the tooltip doesn’t provide any help to your users while they are using your product, you should avoid interrupting your users.

4- Do not invade the screen.

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

You want to provide better UX for users when you use tooltips. So, if the way you use tooltips cause for a bad UX, then you. better not do it all.

Here is a bad example:

You can see in this example that the tooltip is blocking the area where users should write the text. 

As I said, you use tooltips to provide better UX, therefore avoid anything that will prevent you from doing so.

What is a Tooltip used for?

Tooltips have a wide range of use-cases, and they can be adjusted to each use case depending on their purposes. 

Taking all of its use cases into consideration, I can say that they support the idea that tooltips are used for increasing user experience. 

They are used to make it easier for users to benefit from your app in a more efficient way. So, they should be treated accordingly.

Tooltips can be added into such elements as:

• Click elements
• Hotspots
• Hover texts

Let’s see these elements at work with the use cases of tooltips.

Best Practices and Examples of Tooltips

As I said earlier, tooltips can be added to various elements that are critical for providing a better user experience. 

In this part of the article, I will try to show you some examples of good use cases of tooltips that are added into click elements, hotspots, and hover texts.

The further I move on, the more I will try to convince you that tooltips are not bad UX in and of themselves. 

If you know where and how to use tooltips, they can help you create magic for your product.

User Onboarding

A good user onboardingWhat is user onboarding? User onboarding is the crucial process that starts from the first login of a new user and ends up in their aha moment, and usually beyond…. process starts with a well-prepared product tour. 

Using tooltips added into click elements in product tours is a must because product tours are not just about showing but are also about explaining.

And, using texts created with elaborated words will help you much better explain your product and its features.

Let’s look at a product tour Zakeke created with UserGuiding:

You can see that thanks to tooltips, Zakeke is able to welcome its users with an interacting message and briefly explain what to do for product adoption.

Let me give you a secret:

User onboarding doesn’t end with a product tour!

If you want to increase product adoption and feature adoptionWhat is Feature Adoption? Feature adoption in short refers to the usage and consumption of a designated feature by the users of an app, web product, or software. A product… rates, you should also provide your users with product feature walk-throughs.

In order to provide a good user onboarding experience, feature walk-throughs should be well prepared.

After an educating product tour, they are one of the most significant parts of the process. 

Guiding your users through your product will help increase product and feature adoption rates.

In order to do so, you should create interactive guides for your product. You should talk to your users through tooltips to help them understand and internalize the whole process.

Using click elements will help users better interact with your product, and therefore better understand how to use your product.

Adding tooltips to your click elements will provide a better experience because you will be better able to explain to your users what to do and how to do it.

Let’s look at an example:

Updates and Reminders

Tooltips can help you announce new features in the right way and at the most relevant point of your users’ journey.

Let’s directly take a look at an example and later talk about why it is a good example:

First of all, you can guess that Facebook constantly updates its features, and if it were to announce every update with pop-ups, then its users would be fed up with announcements. 

The result would be that users would start to ignore announcements and eventually miss out on the important ones as well.

This is why announcing feature updates at a point where users will benefit from the most is very important.

In this example, you can see that when a user hovers over the buttons on Facebook Albums, they come across a tooltip that informs that about an update that will be useful to them at a relevant point.

Let’s look at Canva for another example of a tooltip that is triggered when a user can make use of a feature that they have never made use of:

Here the tooltip helps remind users that they can make use of a feature. 

You can also see here that it is briefly explained and presented to the user at the most relevant moment.

HELP!

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

As you can see, the hotspot grabs the attention and creates an urge in users to know about the important information.

Since this is a piece of important information, it should constantly stay there instead of pop-up texts that users are presented with during a product tour or a feature walk-through.

Rather than popping up the text, you add a tooltip to a hotspot because you don’t want to interrupt your users from getting work done.

In this regard, tooltips help you solve a problem that users often face. Thanks to this tooltip added into a hotspot, you won’t have to worry about answering questions coming from users one-by-one.

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

How do you create a tooltip?

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

Let’s explore the methods that you can use to create tooltips for each of those.

Tooltips For Websites and Web Products

There are three common ways to create a tooltip. I will rank them from the most convenient to most complex:

1- The no-code way: UserGuiding

UserGuiding is an easy-to-use no-code user onboarding tool that you can use to easily create tooltips, among many other elements. 

With the help of UserGuiding, you can so easily create and add tooltips to the most crucial elements or parts of your product.

Let’s say you don’t have a technical background and you want to be able to create tooltips in a few steps; you can literally take a few steps and easily create tooltips by using UserGuiding’s Chrome extension.

You can customize and personalize tooltips for your users and create them for any use case.

You can try UserGuiding for free!

2- The low-code way: Bootstrap and Jquery

If you want to use another way that is also not so hard for creating tooltips, you can try Bootstrap and Jquery.

You can click on them to learn more about how you can make use of them.

They require a little bit of technical knowledge but if you look at the examples and follow the steps presented in each site, both will help you create tooltips for various use cases.

You can create, customize and place them wherever you want. 

3- The DIY way: Javascript, HTML, CSS

Among all three of the ways, Javascript is the most complex one. However, if you are a developer or there is a developer that can help you with it, Javascript will give you more freedom to create and customize tooltips. 

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.

Compared to Javascript, HTML and CSS are less complex but they are still similar to Javascript.

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

Conclusion

Saying that tooltips lead the way for bad UX is only blaming. 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 efficiency. They should be on your app or your website to make it easier for your users. 

In the article, I wanted to introduce you UserGuiding’s tool because it gives you the ability to create and customize tooltips literally for any use. 

Going back to the analogy that I used in the introduction of the article, I hope now you better understand why tooltips are similar to road signs.

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

Frequently Asked Questions

Are tooltips good for SEO?

If you think 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, and if you interrupt your users with tooltips, you will most likely fail. You should make detailed research about how to make use of 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 to your screen when you hover your mouse over the specific location that is related to the information.