Imagine this: you’ve gone on a holiday to a new country that you have never been to, and you’re driving on a road that doesn’t have any road signs.
How would you know how to drive on the roads in that country?
Having to think about other cars driving in a very unusual way to you, the pedestrians crossing the roads randomly, bicyclists riding everywhere, tangled roads … and then 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 are used to having road signs would have an accident in such a place.
Honestly, I (like many other people, most likely) would either stop driving or go to a different country where there are road signs that make me feel safe and show me what to do.
Now, what if I told you that tooltips are to users as what road signs are to drivers? With this analogy in mind, it’s easy to see that without tooltips, your users would be left alone on the product’s “roads” without road signs.
They would feel the turmoil at a certain point, and they would probably stop using your app and look for other more understandable alternatives.
Let’s further explore what a tooltip is and its use cases.
What Are Tooltips?
Tooltips are small UI elements that users come across on a webpage or an app when they hover their mouse over the other elements of the page. As their name suggests, tooltips give tips about an element or process on apps or web pages. Put most simply, tooltips are text boxes that display a brief explanation of the elements on an app or webpage.
Looking at the example that I used previously, you can be sure that the absence of tooltips can cause great confusion for users.
When well-designed and used in the most relevant point of a product without interrupting users, tooltips can be a great way to increase your product adoption rate and providing a better user experience.
Are Tooltips Good UX?
The answer simply is how you make it. I’m sorry to say this but blaming tooltips for bad UX is lame.
Maybe I can better explain with this image:
Here are some DO’s and DON’T’s for good UX when using tooltips:
1. Do 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 your tooltips don’t offer value, users will start to ignore them and miss out on the most important ones.
Remember that you don’t use tooltips just to increase engagement, but to provide a better user experience.
2. Do use clear and brief descriptions
You should keep in mind that unclear, lengthy sentences will be easily ignored.
Your job is to try to help your users get their work done more efficiently. So first, you need to get your own work done efficiently.
3. Do not interrupt your users
Be very careful ensuring that your tooltips don’t interrupt 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, don’t have it there at all.
4. Do not invade the screen
Some tooltips literally take up the whole screen and cause users to miss out on important information or elements.
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.
Let’s take a look at a bad example:
You can see in this example that the tooltip is blocking the area where users are supposed to write. This, then, means the user can’t truly understand what the tooltip is supposed to be explaining in the first place.
As mentioned previously, you use tooltips to provide better UX; therefore, it’s imperative to 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 purpose. Taking all use cases into consideration, I can say that ultimately they support the idea that tooltips are used for increasing user experiences, so that they can 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 use cases of tooltips to help you better understand what a tooltip is supposed to be.
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 do wonders for your product.
So, let’s get to talking about tooltips examples and best practices.
User Onboarding
A good user onboarding process includes a well-prepared product tour.
Using tooltips added into click elements in product tours is a must because product tours aren’t just about showing – they’re also about explaining.
Plus, using texts created with elaborated words will help you 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 tell you a secret: User onboarding doesn’t end with a product tour!
If you want to increase product adoption and feature adoption 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. Aside from an educational product tour, they are one of the most significant parts of the retention process.
So, you should create interactive guides for your product, using tooltips to talk to your users and 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.
Using click elements allows you to explain to your users what to do and how to do it, which in turn helps users better interact with your product, and therefore better understand how to use it.Let’s look at this tooltip example:
Updates and Reminders
Tooltips can help you announce new features in the best way possible, and at the most relevant point of your users’ journey through your product.
Let’s take a look at an example and talk about why this example is a successful use of tooltips:
First of all, you can probably guess that Facebook constantly updates its features. If they were to announce every update with pop-ups, then users would get fed up with the constant barrage of announcements.
The result? Users would start to ignore announcements and eventually miss out on the truly important ones.
This is why announcing feature updates at a point where users will benefit from them 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 them will be useful 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 neve used before:
Here, the tooltip helps remind users that this feature is available to them if they want to try it.
You can also see that it is briefly explained and presented to the user at the most relevant moment in their process. The fact that it is so brief and clear makes it a great example of what a tooltip is supposed to do.
HELP!
Hotspots are one of the most attention-grabbing elements in an app. As you can see, the hotspot grabs attention and creates an urge in users to know about the important information being displayed.
Since this is a piece of important 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.
In this regard, you’re 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 questions from users all the time.
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. Let’s take a look at them starting with the most convenient to the 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, along with many other elements.
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.
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.
2. The low-code way: Bootstrap and Jquery
If you want to use another, less complex way to create tooltips, you can try Bootstrap and Jquery. Check out the links to see how you can utilize 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. That you can customize and place wherever you want
3. The DIY way: Javascript, HTML, CSS
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.
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 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 cause bad UX is avoiding seeing the real problem. 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 should be on your app or website to give your users a better, easier experience.
I wanted to introduce you to UserGuiding’s tool because it gives you the ability to create and customize tooltips for literally any use, and it will help you use tooltips quickly, easily, and pain-free.
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 turn to create and customize tooltips to conquer the game of providing the best UX for your users!
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 to your screen when you hover your mouse over the specific location that is related to the information.
