Tooltip

What is a tooltip?

A tooltip, as the name would suggest, is a tip that appears over the navigation button of a tool and explains what the tool can do. It is also commonly known as an Infotip, or a hint.

It is usually incorporated into web design, as these designs have many more elements in them that would distract users; also, tooltips are usually triggered by hovering over with the mouse.

A tooltip can be used to explain a feature, increase awareness to it, or get users out of a pain point. Each of these uses are extremely valuable, and although newer practices push extra UX elements such as tooltips out of the equation, tooltips are a must.

When tooltips are used to explain features, they can help increase feature adoption and therefore, retention.

When they are used for increasing awareness to different functions, it can help increase user engagement and breadth of use among users.

And when the are used to get users out of pain points, they can help smoothen your UX and enable you to offer frictionless paths.

How to add a tooltip to my website/product?

There are various ways of creating a tooltip:

With HTML and CSS combined, one can create tooltips that are direct and less demanding. 

Here’s a detailed guide on creating a HTML and CSS tooltip.

If you want to provide your additional information using JavaScript, however, here’s the guide on creating the JS tooltips.

If you don’t have access to a developer or any sort of development resources however, or just don’t want to spend time on coding something that you could achieve in minutes, you can try a 3rd-party tool such as UserGuiding to create your tooltip without getting bothered.

When should a tooltip be used?

There are 4 different times a product can display a tooltip:

  1. All the time: A tooltip can be always available, hidden behind a small information symbol on the corner of a button. This is used if the designer is unaware of the part of user journey a user might need the information, so they choose to make it always available.
  2. New feature release: During or after the release of a new feature, a tooltip can be used to increase awareness to it. This is used if the product has an existing user base that would like to benefit from this new feature but are not possibly aware of its release.
  3. Drawing attention to an existing feature: Some features can be less used than others, some might not be used at all. If a company believes that there is value in a feature that users would like, but isn’t used because they’re not aware of its existence, they can introduce a tooltip to this feature.
  4. During Onboarding: During a user onboarding, every feature is a new feature to a fresh user. That’s why tooltips on some of the complex parts of the product can be extremely helpful to first-time users in navigating the product.

Whether a tooltip is used to educate a user, or just give them a heads up; it has to be simple and straight to the point with possible humor and fun references.

Selman Gokce

Selman Gokce is the Senior Inbound Marketer of UserGuiding. He is highly invested in user onboarding and digital adoption, especially for SaaS, and he writes on these topics for the UserGuiding blog. When he's not writing, you can find him either listening to LOTR soundtracks while cooking or getting angry because he lost in a video game.

Copy link