7 Tips For Better Tooltips 😉

Tooltips! They appear when you need them. They are the clarity that you seek.

What is a tooltip, you ask?

Tooltip is a dialog that will contain information commonly about what an element is about. Tooltip is commonly seen when you hover the cursor on an element in a website or it can also appear by itself without any interaction at all. Usually, in the mobile app, a tooltip will appear by itself without any hovering (unless in the future when our phone can detect we are hovering our finger on the screen 😅).

It looks something like this

See that box on the right? That's a tooltip!

If you are designing tooltips or considering to use tooltips, here are some 10 tips for better tooltips! (tips-ception!)

1. Never rely on a tooltip!

Yes, they are a good tool and they are a good tip. But it should not be something essential that makes you keep relying on it. Although it is a great tool, users actually dislike having to keep reading it. They prefer not to see it, actually. You still have to make an intuitive design that users can understand without even hover their cursor/click on anything. So treat tooltip as a good additional, not a replacement of something essential.

2. Show one at a time

If you have a tooltip that will appear without any click/hovering, it's better to show it one at a time. Showing more than 1 tooltip at a time might be overwhelming to the user.

3. Give a bit of extra information that serves as additional information from the ones on the web/app page.

If the user needs to read the tooltip, give additional (but not essential) information that they won't get on the web or app page main interface. It's like we have to give them good additional information in exchange for their effort in reading the tooltip! Additional information such as what's the meaning of the certain word in the context, what is the recommended best practice, or what is the usual value entered.

Google Ads tooltip here is a good example because the word "Best" gives a good meaning, additionally, hovering on it shows tooltip about what does "Best" mean in this context and what it does for my ad!

4. Don't add a tooltip to emphasize information that is so obvious.

Giving a tooltip for something so obvious is annoying and useless. For example, in Gmail, you can't hover on the "Subject" section when composing a new email because it's so obvious what's the "Subject" means in an email. In the example below, it is also not a good move to emphasize the fact that you should enter your email in a box labeled "Email".

I wonder what should I enter in that field 😁

5. Don't show super important or critical information ONLY in the tooltip

Just like you should not show obvious information in the tooltip, you should also not hide important/critical information from the main interface and put it in the tooltip. Some users do not want to read the tooltip and might just miss out on the critical information, therefore increasing the chance of human error. Tooltip information should be something that if the user reads, it's great. But if they don't, it's fine, too. Don't expect all users to always read the tooltip.

Example of bad tooltip : User only can know from the tooltip that their selection is permanent.

6. Using a tooltip to explain your unique icon or term is a good idea!

If you have some unique icon or special term, it's always good to provide a tooltip because the chances of users not understanding what the icons and terms mean are pretty high. Not all icons need to have a tooltip. Something very obvious should not have a tooltip (like how + icon means 'add').

Google's Youtube Studio gives a good example of how they use so many unique terms that laymen most likely can't understand and provide a tooltip when the user hovers their cursor on it, like what does "Realtime" section and its bars mean.

7. Put the tip into the tooltip!

Have you find yourself wanting to enter a value in a field but thinking long and hard about deciding what to enter? Here's when the tooltip might be really helpful! Use tooltip to give recommendations on what users can enter, such as what kind of information best to have in the description.

Tooltip is a really great tool to support user experience when done right. Now that you've known the secret tricks for better tooltips, go ahead and try it when you got the chance to!

Do you have additional tips to add? Comment down below!


14 views0 comments

Leni Tjahjadi

Product Designer
  • linkedin