UserOnboarding.Academy is a non-commercial community. It is free and will remain free.

What Are Tooltips in Web Design + 14 Examples to Set Yours Up

This article will explain what tooltips are, why they aren't liked and how to correct the bias against tooltips by comparing and examining great tooltip examples.
Category
User Onboarding
Written by
Selman Gökçe
Published on
August 1, 2022

Tooltips are user experience (UX) elements that can be adapted to multiple purposes. The main features of a standard tooltip are being minimalistic and direct to the point. The copy on a tooltip usually shouldn't exceed 180 characters.

Tooltips are the valet service of onboarding.

They are not fully trusted, considered a burden, and are overlooked by every first-time user most of the time.

Nevertheless, simple tooltips can excessively increase the quality of a user journey, since it also takes away the burden of cherry-picking important information from app messages or modals.

And the best way to understand what differentiates an effective tooltip from a disliked standard tooltip is to see the best examples.

So, let's dive into it:

What Are Tooltips?

Tooltips are user experience (UX) elements that can be adapted to multiple purposes. The main features of a standard tooltip are being minimalistic and direct to the point. The copy on a tooltip usually shouldn't exceed 180 characters.

Tooltips are not liked by many people, and they are considered "spams." The reason behind this is the fact that tooltips are wrongly used most of the time.

  • A tooltip shouldn't overlap important parts of the user interface, or shouldn't present a full-screen message.
  • A tooltip can only be effective when the tooltip design is simple, the tooltip content is short and clear, and it acts as a focusable element rather than a messenger itself.

What are Tooltips used for?

Both regular tooltips and custom tooltips have the same functions. Here are the most common four of those:

- Highlighting important parts of the screen

Tooltips can be used to draw attention to the navigation menu during the user onboarding process to show them how to get the best out of your tool.

- Creating a focal point

They can also be used to create a more specific focal point than a permanent active element. For instance, by darkening or blurring the surrounding of the tooltip, you can drive the user to focus on a specific point to trigger mouse pointer movement by the user and complete key actions.

- Announcing specific changes or updates

A tooltip can be utilized to act as a less-annoying announcement banner. You can quickly grab users ' attention by placing the tooltip into a hotspot that draws attention to the change or update.

- Reminding a long unsued key feature

Instead of announcing an update, you could also use a standalone tooltip, pointing to the control panel to trigger the activation of a long-unused feature that is crucial to reach the "Aha!" moment.

How Do You Make a Tooltip?

There are three main ways to create a tooltip. Each of them has their own advantages and disadvantages.

Those ways are:

1- Code Your Own From Scratch

You can create your own native tooltips by using HTML, CSS, or JavaScript.

The advantages of coding your own tooltips are:

  • You can design, place, and customize them as you wish,
  • You won't have to pay for any other tool to get help.

The disadvantages of coding your own tooltips are:

  • You will have to spend a lot of time and effort.
  • If you don't have enough technical background, the costs of hiring a new developer can exceed third-party tool expenses.
  • The maintenance and bug solving processes can be overwhelming.

2- Get Help From Open Sources

There are various open source libraries that can lift some of the weight off your shoulders. Some of those are:

The advantages of using open sources are:

  • You can save more time compared to coding yourself from scratch.
  • You can also save more money compared to adopting a 3rd party if you have a team that has free time to use the source.

The disadvantages of using open sources are:

  • Hiring one can become more expensive than expected if you don't have a team ready.
  • Open source tools are usually not customizable, so you wouldn't be able to have a good and blending design.

3- Save Time And Effort With Onboarding Software

User onboarding software mostly provides interactive elements such as individual tooltips, progress bars, checklists, and models. By adopting an onboarding software that fits your needs, you could save both time and effort while creating accessible experiences for your users.

Some of the best of those tools are:

The advantages of adopting a tool are:

  • An onboarding tool usually offers a wide range of cool features along with tooltips that can help you create better interactive content.
  • The provided templates can save you from starting a bad tooltip design process for nothing.
  • It can also save you from the annoying process of coding twice or more for desktop and mobile devices.

The disadvantages of adopting a tool are:

  • You will have to spare time for market research and finding the most compatible type of tooltip software.
  • If you want more than user onboarding features, you might end up paying more than a developer's salary for a tool per month.

14 Examples of Tooltips for Your Next Design

From classic tooltips to the most original ideas, these companies managed to get the most out of the long-disliked UI pattern: Tooltips.

1- Candy Crush

Candy Crush welcomes new players with a mascot, contextual tooltips with graphic support, and a massive skip button. The user can interact with the function by pointing at the candy as the mascot does.

Even though the background is crowded, the worldwide loved game found a comprehensive tooltip solution by integrating simple and single tooltips on each screen.

2- Canva

This contextual tooltip example offers a distinctive overlay tooltip when altering a picture to show out other tools users may test in their projects. Despite its size, the overlay is translucent.

Canva users may close the overlay by tapping anywhere on the screen, or they can learn more by tapping on the circled element. 

3- ClickUp

If you are not utilizing the tool to its full potential, ClickUp displays a tooltip showing one of its features that you may benefit from based on the features you utilize. The tooltip also presents a gif to help direct visitors.

Even though the style seems like a traditional tooltip, the fact that this small reminder can increase activation rates is a lifesaver.

4- CuePath

CuePath is a medication reminder tool. Because Cuepath's target user persona is above the age of 65, employing a hotspot aids in persuading users to read material.

The correct usage of this tooltip functionality is catchy, and the animated tooltip makes it only easier to read.

5- Duolingo

In the initial handful of courses, Duolingo asks users to click on words or letters to see their meanings. It highlights the words and, when clicked, displays the meanings immediately away.

Users are expected to click on the tooltip since they have no notion what the word or sentence is. However, it is not imposed on the user, but rather a user requirement at the time.

6- Evernote

The Evernote app uses a tooltip to notify the user of a feature that they may want to utilize, and clicking on it launches a video that explains how it works.

As you might have noticed so far, tooltip options for mobile devices are as diverse as desktop.

7- Figma

Figma displays a shortcut option to users by proposing a tooltip on the appropriate feature and describing how it may be done more easily in another method.

The tooltip is also accompanied by a graphic demonstrating how to use it.

Figma also doesn’t force users to give the shortcut a try, which is often not the case with other tools.

8- Flourish

Flourish greets users with a four-step welcome modal and then prompts them with an onboarding checklist.

This checklist includes interactive instructions that consist of tooltips, which are activated when a user clicks on the respective step on the checklist.

9- Google Chat

Google Chat has one of the most basic app tours ever. The tour is divided into three phases, after which visitors are provided with another contextual tooltip outside the tour that outlines the options available to them.

Despite the fact that there are few functions, Google does not overlook the fact that there are contextualities to the apps with the least amount of functionality. It has a contextual tooltip for when users are ready to begin conversing.

10- Heap

Heap employs a trio of onboarding UX patterns to ensure that users pay close attention and focus. They achieve this aim by combining a hotspot and a tooltip and adding a vignette shadow.

Heap maintains it low-pressure by utilizing a hotspot&tooltip combo instead of an announcement modal, and he includes a close button to allow users to avoid it.

11- Indicata

Indicata informs its users about their latest features and report using tooltips and announcement modals.

They employ a hotspot to open a tooltip with a video for the former, and an announcement modal on the right side of the screen for the latter.

12- Landbot

Landbot, their mascot of the same name, pushes consumers with a product tour offer.

With its slick design and the presence of Landbot (the mascot), the 11-step product tour seems like a breeze.

13- TimeSolv

TimeSolv has a naturally complicated interface, and this is true for individual tool functions as well.

To address this, TimeSolv employs a contextual onboarding strategy that includes tooltips for each region on a page and highlights the areas for greater concentration.

14- Typeform

During the initial onboarding process, during which users learn how to utilize Typeform's capabilities, the tool prompts them with many hotspots throughout the screen.

Users learn how to utilize the tool at their own pace by clicking on everything they desire, completing only one action per tooltip to increase the learning rate.

Other Blog Posts

See All