Are tooltips useful? 15 successful examples

Do you know a story about the invention of a teabag? Long ago in 1904 lived a tea trader named Thomas. That time people sold a tea in big metal cans. But Thomas was a pretty clever man, he realised that retail is more profitable than wholesale. So he made small silk bags, put tea leaves inside and offered them to customers.

Silk bags looked fine and smelled good. Curious customers bought some to try. At home they wondered how to use the bags – no instruction was provided. So the laziest guy suggested "Hey, let's just put the bag in a teapot". So they did.
What happened next is a history. People loved it. Tea bags gained worldwide popularity.

Thomas was lucky teabags had no instruction. But this is an exception that only confirms the rule. How many products fail because users don't understand how to use them?

Modern IT-products are much more complicated than a teabag. Users stumble at every step because don't understand what they see and how to use it. In many of these cases, a simple tooltip can help.

Ok, let's be methodical about this.

This situation can appear in empty sections where there is no content yet. Users can't guess what should be in a section and what they should do to make the content appear there.

MailChimp figured out that a "Comments" caption can be interpreted in many ways and added a clear description to the section:

New customer can be confused by a new terminology. And when a person is confused he gets nervous, presses everything he sees, gets upset and leaves. Such an issue in a critical place, e.g. in the installation module can cause losing a client.

Convead example – not every customer knows what XML-file is and how to get it, so we added a link to description:

Sometimes a customer doesn't understand the importance of a requirement. E.g. in MailChimp it's necessary to add an "Unsubscribe" link to an email template. An inexperienced user can think "Come on, I don't want my subscribers to unsubscribe, I'll better skip this link". So MailChimp explains in detail why the link is important and how it works.

Airbnb example – these guys managed not only to explain what is Service fee but showed its value to the customer and justifies an extra payment. Bravo!

Designers like to use a short description in web forms fields that make difficult for customers to understand how to fill them. It's pretty easy to fix – just give a correct example.

PivotalTracker offers an awesome solution. Recently they added a new field "Blocker" for a task and explained what you can write in this field – a reason why the task is blocked, e.g. link to other story of a user who is responsible.

Don't try to make a caption one word short. Shortness is good, but not when you sacrifice the meaning. Google Maps used a long phrase and made a direction search interface pretty useful:

Our customers in Convead had troubles using AND/OR conditions in a segmentation tool. We added examples and customers began to understand how to combine conditions. The number of errors and questions decreased dramatically.

It happened so many times to me – want to change a Facebook cover image and go google what size the image should have. Why? Because Facebook can't write the required size of a cover image in the interface.

Clever LinkedIn does the opposite – shows a recommended image size on edit icon hover.

If you have a file upload function of a web form with restrictions or recommended parameters – it's a good idea to tell your customers about it before they made a mistake. They will be grateful.

TildaPublishing (web site constructor) example – they specify the recommended but not required size of an image.

I love these guys. They are pretty helpful.

Sign up forms deserve a special attention. A lot of services requires a password to be long enough, to contain upper and lower case letters, numbers and special characters. But it's not always clearly shown in the interface.

HubSpot in my opinion did this job perfectly:

Imagine you add a new functionality to the interface element. Or one of your blocks has functions not many people aware of. You can tell your customers about it without cluttering an interface and distracting customers from their main activity.

E.g. in Google Maps you can switch a destination and departure points. You can learn about it if hover an icon:

Previous notes were more about usefulness and comfort. This one can dramatically influence customer engagement, conversion rate and business growth.

Airbnb example. It's scary to click a "Book" button – what if I will be charged immediately? Guys just wrote that no, you won't.

Designers like to add payment systems logos, draw lock icons, write about N-bit encryption on the billing form pages... and they are right.

Elegant Intercom page example. Not too much additional info but looks pretty secure.

Customers may be afraid not only to lose money. They may be scared that their work hasn't been saved or that other people will see their personal data.

Gmail to my opinion perfectly shows email was successfully saved:

And Facebook shows your personal data is secure:

Tooltip looks like an unimportant detail that brings only visual noise and distracts from the main action. But is it true?

Imagine you have spent a budget to customer acquisition, he signed up, went a half way to the billing page then suddenly didn't understand something, became confused and left. Will you be happy?

In many cases, a lot of questions, hesitations and fears can be removed by tooltips. Yes, not always. Yes, they can be obsessive. But we are reasonable people and won't add tooltips to every interface element, will we? :)