Why Tooltips are Terrible and How to Better Design Them

How to make this key UI design pattern work well for your users

Pulkit Agrawal
7 min read

An example of a terrible tooltip

Recently when helping a company improve their product’s user onboarding; I saw the tooltip design below 😱 -- a "terrible tooltip" which gives tooltips a bad rep!

It's clear from the design that the + icon is there to add new people!

The tooltip here is being used as a shortcut to prompt users to do what the product manager wants (users to send invites). Unfortunately it's not as easy as that -- you cannot simply just add tooltips to create engaged users.

This tooltip doesn't provide any new value; the interface element is already easy to understand and this makes the tooltip redudant and annoying.

Users take action because they are motivated, have the ability and are prompted by a trigger, which means tooltips will only succeed when the user understands the value proposition and the interface is intuitive.

The psychology behind this is from BJ Fogg’s behavior model and summarized here.

When thinking about optimal UX, good tooltip design can have a big influence on users understanding your functionality and eventually succeeding. Conversely bad tooltip design presents tooltips as irritants and they lose all credibility.

Friction Logs: Interactive Workshop

Join us on Tuesday Sep 29th at 10 AM PST and we'll tear down high-friction flows of popular products together.

🎥 Summary: the What, Why and How of Tooltips

Prefer to watch a video? Here's a quick take on what makes tooltips terrible and how you can avoid these mistakes to make yours truly great!

So great use cases for tooltips include: user onboarding, feature discovery and taxonomy explanation. But why do they have such a bad reputation, and what are examples of good ones? Read on...

Don't blame tooltips!

The problem isn’t the tooltip — it’s what the tooltip contains and, more importantly, when and to whom it is shown. Below is a stellar example:

An example of a great tooltip from the Facebook Ads team

An example of a great tooltip from the Facebook Ads team

This tooltip greeted me when I logged into the Facebook Ads platform after a long time and was (a) interesting, (b) relevant and (c) valuable. I learned something useful that I wouldn’t have gleaned by myself. And now that I’ve been shown this once, I’ll remember it — I don’t need to be told again!

The second parts of Facebook Ads user onboarding tour The third part of Facebook Ads user onboarding tour

The second and third parts of Facebook Ads user onboarding tour

This was great user onboarding from Facebook — short and punchy, overarching yet focussed. It did not insult my intelligence and quickly got out of the way to allow me to explore at my own pace.

Facebook, Google, Pinterest and many other companies have great copy in their tips, which makes them effective. One big part of this is that large engineering teams can run experiments and empirically find what works best. Unfortunately, even though A/B testing, feature-gating and user research are hallmarks of good product development, most teams do not apply them for their user onboarding. First versions of any design are often wide off the mark and so without iteration, users are left with a sub-par first time UX. This is what makes tooltips terrible.

Finally tooltips should be shown only when relevant — when I need the help and when I can use the help. Otherwise I’m not ready for them and try to dismiss them as hindrances to what I actually want to be doing.

In the bottom-left corner I am prompted to see new “Cool features…” from Typeform

In the bottom-left corner I am prompted to see new “Cool features…” from Typeform

I love Typeform but the prompt above could have been triggered at a more appropriate time: in the view above, I’m within the form builder and my goal is to produce a survey. Anything that prevents me achieving my goal is an obstruction, so instead of being receptive to checking out their new features, I develop an aversion to them. Unfortunately it’s not easy to trigger prompts when the user is most ready for them. This is what makes tooltips terrible.

But tooltips can be used very effectively, as a means to provide dynamic interfaces.

One-time user experiences are hard to design, build and test, but tooltips allow you to present contextual and relevant information to users that they only need to see once. There are examples of where teams have done this natively — Slack’s quick switcher icon disappears after a few clicks (when you’ve understood what it does) — but not many. Tooltips or other in-product notifications are an excellent method for providing one-time guidance to users, if done well.

Slack notification bar that asks a user if they want to learn more

This awesome ‘tooltip’ / in-product notification clearly endorses the option for self-discovery.

So don’t make tooltips terrible with these 5 simple rules:

  1. Consider each tooltip as friction — you are asking your users to read something — so make sure they get immediate value from that info.
  2. Explain only things that are not discernible from the interface / design.
  3. Make tips as contextual as possible — trigger them based on user actions and show them to the most receptive group of users.
  4. Show one at a time and don’t show more than 3–4 in a row. Users get fatigued quickly and need time to act on / digest what you have taught.
  5. As with everything else, analyze and test them!

Chameleon lets you do all this pretty easily, but you can also build your own in-house infrastructure (although we recommend assessing the true cost of this first).

Don't Waste Time Building Tooltips From Scratch

Chameleon lets you design and change tooltips on the fly, without code

Tooltip design examples for inspiration

To make this article's points visually, let's take a look at three examples of great tooltip design that come from our library of product marketing examples.

LinkedIn's design change tooltip

LinkedIn tooltip design example

Interface aesthetics can drastically impact a user's perception of the product and the way they feel about using it. So, when a product changes the way it looks, it's good practice to allieviate some of the initial user astonishment by explaining the benefits of the redesign clearly.

Here, LinkedIn does this with a tooltip tour that starts by enticingly communicating what the design change will do for the user.

Google Drive's feature discovery tooltip

Google Drive tooltip design example

Sometimes one feature can be the gateway to discovering even more valuable functionality that goes deeper than the user's current habits and workflows.

For example, the fact that you can collaborate in Google Drive documents with action items and suggestions becomes obvious when another user assigns you an action item. To help users discover that this collection of features is easily accessible at the document menu level, Google Drive uses this subtle, contextual tooltip.

Segment's product terminology tooltip

Segment tooltip design example

Learning a new product can mean getting involved with a whole new field of study. Using an SEO tool might teach you what backlinks are, or an analytics platform educate you on bounce rate. To be mindful of the different levels of expertise your users have, make help on complex, technical, or unique concepts easily available with a tooltip.

If more product managers and designers can apply these principles, we can have products that are easier to understand (more effective) and less annoying (more engaging) at the same time 😋

To learn more about how to use tooltips and product tours effectively, check out our design guide.

Free in-product marketing mini-course

Learn feature launches, upsells, and onboarding from products like Stripe and Dropbox. Get lesson #1 now 👇

We use your email to send you new blog posts and product updates.

What are your thoughts?

You might also be interested in...

Effective engagement, made easy.