Whenever we design a new product, our aim to create a user interface that is so intuitive that users can figure out what they need to do with no help at all.
That is how all of our products would work in an ideal world.
But in the real world, when users are engaging with a product for the first time, sometimes they need additional guidance and signposting. When we introduce new features, we need a way to draw the users’ attention to this.
When users aren’t getting the most out of a product because they are missing important features, we need a way to alert them. And when there are important but rarely used features, we need a way to remind users what exactly it does to increase feature adoption.
All without breaking the flow of the user, or annoying them with long tutorials and complicated guidance documents, when all they need is a little prompt.
That is where tooltips come in. They are a great way to provide users with that little nudge without disrupting their activity.
You might be saying that tooltips are extremely annoying and they harm the UX. And we agree with you, tooltips created poorly irritate rather than facilitate.
That’s why in today’s post we are going to look at how to create and use tooltips the right way to onboard users and help them get the most out of your product.
In this guide, we will go over:
- What tooltips are,
- When they should be used,
- Different methods to create them
- and the 7 principles of a great tooltip
What Are Tooltips?
But before we dive in, let’s just make sure that we are all on the same page as to what a tooltip actually is.
A tooltip is a brief explanation and how-to of an element on the page a user is viewing.
Tooltip Examples
Let’s look at an example of each type of tooltips.
Purists will argue that tooltips always need to be user-triggered, like our first example.
This tooltip on Facebook appears when you hover your mouse over the spoked wheel symbol in albums. It lets you know that this button can be used to download the entire album.
But we often use the word tooltip to also refer to popups that are triggered by other activities, such as the user logging into their account after a new feature has been released or during their onboarding.
Take this example from Canva, which has a series of tooltips that come up when the users entered the editor for the first time:
In a sense, this was triggered by the user, their action was to enter the editor. But rather than being something that they consciously sought, it was something that the product decided to push them as a part of their onboarding.
When Should You Use Tool Tips?
While it is impossible to define all the potential use cases in which tooltips might be useful for giving users a bit of guidance, we can have a look at examples of when tooltips have proven useful.
Onboarding
We have dedicated many articles to the importance of user onboarding to converting and retaining users and ensuring satisfaction. There are many different ways to achieve good user onboarding, and which techniques work best depends on the product and the user group.
When it comes to user onboarding, tooltips are useful when the user is unlikely to need a full tutorial or walkthrough to figure out how to use the product.
We could take Instagram as an example. The interface is very intuitive, using symbols and gestures that are familiar. But if you are adding your first story, you might not know what all the icons at the top of the screen allow you to do. So here, a tooltip is a useful, lightweight way to provide the user with that information.
Updates and Reminders
Another appropriate time to use tooltips is when alerting users to new features or reminding them about features that they could be using to enhance their experience but aren’t.
These are examples of situational triggered tooltips, rather than tooltips actively triggered by the user.
Popping up the tooltip on the newest feature as soon as a user logs in is a decent method. But similar triggers could alert users to features, for example, triggered by a period of time in which that feature has not been used.
Infrequently Used Features
There are some features in your product, which are great, but users don’t use all the time. So when they come back to it, they might have forgotten exactly what a feature does, or how to use it.
An example of this is InDesign, an image editing software. There are so many things that you can do with this type of software, that it is little surprise that sometimes users can forget what a specific button does or what a specific icon means. This is when you can use tooltips that appear when the user hovers over the icon or button for a few seconds, briefly reminding them what functionality they can unlock here.
How to Create a Tooltip
When it comes to creating tooltips, there are 3 common ways to do it; which here will be ranked from the most complex to most convenient:
1- Creating website tooltips using JavaScript
If you are a developer or there is a developer with a spare time on your team, and are just looking for a few lightweight tooltips; creating one via JavaScript might be the solution for you.
Keep in mind that creating a tooltip using JavaScript is more complex compared to the other methods while updating and maintaining it can eat up a good portion of your developer time.
2- Creating website tooltips using CSS + HTML
Using CSS+HTML to create a tooltip is not much different than creating one via JavaScript, except that it is less complex.
You still need a developer and plenty of time to create, maintain, and update it.
3- No-code method – UserGuiding
If you don’t have any technical background, or just can’t afford to spend your precious developer time on a few tooltips, you can opt for a no-code solution such as UserGuiding.
UserGuiding is a user onboarding tool that you can use to easily create not just tooltips, but interactive product tours, user onboarding checklists, in-app announcements, NPS surveys, and self-help centers.
UserGuiding provides you with the whole package to create user onboarding flows that convert.
Try UserGuiding for FREE!
7 Principles of a Good Tooltip
Regardless of what you use website tooltips for, there are 7 common principles that make for effective tooltips (that facilitate rather than irritate).
1- Are used only when needed
Tooltips get irritating when there are too many of them.
Take our Instagram example again. It is pretty intuitive, and also a highly visual platform, so most new users probably just want to spend some time looking around. But if a tooltip pops up every time they are near a heart symbol, a comment symbol, or a send symbol (all of which are largely self-explanatory), this pulls their attention away from the content, it is going to be frustrating.
2- Are not permanently attached to frequently used functionality
Tooltips can be a useful way to introduce users to important new functionality that they are going to need to use a lot within the product.
But once the user knows how to use that functionality, that tooltip should disappear. No one wants to see the “enter recipient email” tooltip every time they hover over the “to” space in their email application.
When it comes to user onboarding, most tooltips should be temporary. Website tooltips should only be permanently attached to infrequently used functionality.
3- Are pithy, informative, and action-oriented
The point of the tooltip is to quickly prompt and orient the user.
Ideally, it should be something that they can digest at a glance. If you need to write a tome in order to explain to the user what they need to do, then a tooltip probably is not the right solution for this problem. You may be better off serving the user with a video tutorial, or even an interactive walkthrough.
Tooltip text should be short and to the point, should be informative and not contain any filler, and should be action-oriented, telling the user what they need to do and what they can do. It can also be useful to tell the user how the particular functionality that they are looking at will benefit them.
For example, a tooltip linked to “tag” functionality might inform the user where and how to apply a tag, and inform them that tagging will allow them to search for and group photos more quickly. Therefore, the user is advised not only of what they can do, but why they should do it.
4- Are easily dismissible
Every user is different and needs a different level of assistance.
Plus, some users like to have everything described for them, while others prefer to discover things for themselves. Therefore, users get different value out of tooltips. Some users will want to digest all the information available in the tooltip, while others will want it to go away so that they can keep moving and exploring.
For that second category of user, it is vital that tooltips are easily dismissible. While permanent tooltips will probably disappear when the user moves or clicks their mouse, onboarding user tooltips often appear as a popup, giving the user more time to read and understand the tip. These tips will need a “dismiss”, “got it”, or “done” button which allows the user to move on.
5- Are delivered one at a time
When it comes to user onboarding, you are trying to get the user to the point of value as quickly as possible, so it can be tempting to give the user a lot of basic information to digest at once.
This is a mistake.
When you are educating users about a specific functionality, it is best to deal with each tool individually.
This means only one tooltip popping up at a time, so the user can be clear about which icon, button, or so forth the tooltip relates to. It also means including in the copy of the tooltip only information about that specific tool, and not to link to information about related functionality.
If it is complicated to deal with the different tools in isolation, then tooltips are probably not the best option for educating your users about what they need to do. Something like an interactive walkthrough will be more effective.
6- Are noticeable but sensibly placed
The point of tooltips is that they don’t disrupt the user’s workflow, but they should not be so subtle that the user does not notice that the help is available.
The tooltip should appear in the same region of the screen as the functionality that the user is engaging with, as this is where they are looking. The tooltip should also appear in a color that contrasts with the rest of the page so that it stands out. In some cases, in particular with onboarding rather than permanent tooltips, the rest of the screen can be darkened in order to bring focus onto the tooltip box.
But the placement of tooltips is very important. It is not uncommon to see bad tooltips, where the pop-up covers up part of what the user will need to see in order to make sense of the tooltip.
7- Are part of a broader product education strategy
Finally, but most importantly, tooltips are never something that should be developed in isolation, they need to fit and make sense within a broader product education strategy.
Product education is pretty much everything that you do to provide users with the information that they need to become active users of your product. This includes awareness-raising and marketing, sales and conversion, registration and customer onboarding, retention and upselling, and expansion and cross-selling.
The tooltips that you use need to make sense within this ecosystem. For example, if you provide users with video tutorials about how to use a product, you may want to reinforce the information provided in the tutorial with tooltips. To do this, you will need to ensure that the language and instructions that are given in the video and the tooltips are the same. You will probably want the tooltips to appear in the video so that the user also understands this feature.
Similarly, if you decide to send an email to users about a new feature, and then reinforce that information with tooltips, you will want that consistency of language so that the user can tie the information that they are receiving from various sources together.
Conclusion
Tooltips have a bad reputation in UX design because they have been executed badly so often. But we think that tooltips when executed well and as a consistent part of a well-researched and planned product education strategy, are powerful tools that help users get the most value out of a product.
Whether you are using them for onboarding, updates, and reminders, or infrequently used functionality, tooltips work best when they are used sparingly, are short and informative, are well placed and designed, and make sense alongside other product education tools.
Frequently Asked Questions
👆 What is a tooltip?
A tooltip is a brief explanation and how-to of an element on the page a user is in.
âť“ Are tooltips useful?
If you place tooltips based on real data and user research, they can be extremely helpful and beneficial for the user experience.
⌛️ When should I use a tooltip?
If according to your users’ journey you believe that an element might need an extra explanation, you should use a tooltip.