How to Create a Website Tooltip

From highlighting the user’s next action to explaining a new product feature: there are few UX elements that are more versatile than the website tooltip.

The only challenge is that building tooltips is not always straightforward, especially if you’re not a trained web designer.

Fortunately, in 2022, there are tools that can help even the least technical of product people build tooltips without code.

Let me explain.

Summary of how to create a website tooltip

• A tooltip is a short piece of contextual help that explains how to use a certain part of your product.
• You can build tooltips as a standalone element, or as part of a larger experience flow.
• Common use cases for tooltips include product tours, secondary onboarding, and upsells.
• It’s very time-consuming to create tooltips with code, even if you use templated code.
• Moreover – it takes up the development resources you could use to work on your product.
• It also disenfranchises your product marketing managers, who need to wait for your developers to build every tooltip they need.
• The long development cycles furthermore prevent copy experimentation.
• A far better solution is to use product tour software like Userpilot.

What is a website tooltip?

Let’s begin with a definition to ensure we’re on the same page.

A tooltip is a short text box that is linked to an element of your website. It provides contextual help to show the user what that particular element of your site does.

This is especially valuable if using the feature being highlighted by the tooltip is not immediately intuitive.

On desktop, the tooltip will appear when the user hovers over an icon, a hotspot, or another active element with their mouse.

On mobile, a tooltip appears when a user taps and holds the element.

In both cases, the tooltip will provide additional information about how to use your site, which will vanish after the user has moved their mouse or finger away.

There are two types of website tooltips: the standalone, or “native” tooltip, and the tooltip that’s part of a larger experience flow.

The native tooltip

This standalone tooltip provides the user with helpful information on its own, without requiring any other UI elements to support it.

It’s also referred to as a “native tooltip” because it’s built into your website and effectively becomes part of your native UI.

Many native tooltips display permanently, but some appear only when the user interacts with the active element.

Examples of the latter might include:

• If a user moves their mouse over a new product feature that isn’t straightforward to work out.
• When a customer taps and holds a hotspot.
• If your product has some kind of proprietary metric that needs explaining to users, as in this example:

The tooltip as part of an experience flow

In other cases, the UX can be so complex that just one standalone tooltip isn’t enough to give the customer enough contextual information to use your product correctly.

Here, you need to create a series of UI elements that work together in harmony to show the user the way. We refer to this collection of UI elements as an “experience flow.”

Here are some examples of experience flows that often make use of tooltips:

• A product tour for new customers as part of user onboarding
• Secondary onboarding, such as the release of new features
• Announcing the launch of new web pages

Now that you know what a tooltip is, let’s look at some common use cases, complete with some tooltip examples.

What can you use tooltips for on your website?

Tooltips have a number of applications at each stage of the user journey.

Product tours for new users

Tooltips are commonly used right at the start of the customer experience as part of user onboarding.

During a product tour, businesses provide users with an activation checklist containing the most important things they need to learn in order to activate.

Tooltips are used to highlight the path to completing these activation tasks.

For example, for social media scheduling app Kontentino, activation involves two steps:

1. Connecting a social media account
2. Scheduling a post

For both of those steps, Kontentino has created a tooltip to explain to the user where to navigate to.

Here’s the tooltip for connecting a social media account:

And here’s the tooltip showing them the process for scheduling a post:

For a full run-through of how to build a product tour that includes tooltips, I suggest reading this post.

Secondary onboarding

Further down the customer journey, SaaS businesses often release new features that are specifically aimed at users who have been on their platform for some time.

This is especially true for large companies with an established user base.

Let’s look at this example of a tooltip from Ahrefs:

Ahrefs’ main value proposition is to help businesses rank on Google using SEO. It provides all sorts of tools and metrics to help with that, such as a keywords explorer feature and the ability to monitor the SEO of competitors.

As such, it’s not essential that their customers know how to switch between HTTP and HTTPS protocols. But that is a nice feature for a more advanced user.

In other words, the perfect candidate for a secondary onboarding tooltip.

Upsells

While improving activation and feature adoption do have financial consequences, businesses can use tooltips to derive a commercial benefit in more direct ways as well.

For SaaS businesses in particular, it’s essential to retain customers for a long time and upsell them wherever possible.

That’s because the revenue from SaaS subscription payments compounds over time, leading to what’s known as “expansion revenue.”

A standalone tooltip is a helpful way to showcase an upsell to an existing customer.

In this example, the customer is encouraged to sign up for a sales call to discuss multichannel prospecting ads, which is an upsell.

The tooltip can be seen on the right in blue.

It appears automatically when the user mouses over the lightbox on the left.

If you’re wondering how to build tooltips for your own business, read on!

How to create tooltips with code

Given the size and scope of the humble tooltip, you might be forgiven for thinking that they’re easy to build.

Well, perhaps if you’re a developer, or if your team is full of web designers who have nothing better to do with their time!

Look at this simple tooltip:

It’s not especially stylish, although it does get the job done.

Now look at how much code was required to create it:

<html>
<head>
<title>HTML tooltip</title>
</head>
<style>
.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 160px;
background-color: #856;
color: white;
text-align: center;
border-radius: 4px;
padding: 9px ;
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -85px;
}
.arrowpopup .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #856 transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
</style>
<body style="padding:100px;">
<div class="arrowpopup" onclick="myFunction()">Tooltip Demo Click here!
<span class="tooltiptext" id="tooltipdemo">HTML Tooltip helps you to display extra information of element.</span>
</div>
<script>
function myFunction() {
var tt = document.getElementById("tooltipdemo");
tt.classList.toggle("show");
}
</script>
</body>
</html>

Looks like a pretty annoying process to me.

Note that every aspect of this code has to be specified manually. So all the functionality relating to color, height, padding, positioning, visibility or width needs to be put into the code by hand.

You can add the same amount of work again if your tooltip looks different when you hover over it compared to when it’s left alone.

That translates into a lot of developer time required to create something like this.

Worse, whenever you want to change something really minor, such as changing the color from maroon to blue, you’d have to fish through the lines of code to find the right place to make the edit.

Imagine if you want to make the same edits to all the tooltips on your website at the same time. Now you’ll need to change the code in multiple places at once!

And the really annoying thing is that users are incredibly unforgiving when it comes to code errors on something like a tooltip.

Put yourself in the shoes of your customer for a moment and imagine that you mouse over a tooltip, only to have the text be so large that it blocks off the feature you’re trying to use. It’s irritating!

So we’re talking lots of technical work for a result that has to be perfect to keep users happy. Sounds like a recipe for stress.

And remember: this is just a simple example of a tooltip. For a tooltip that looks a bit more flashy, like this…

… it’s probably going to be even more work!

So what if you used a code template to help?

Building tooltips using code templates

This is a slightly better solution than doing everything manually.

Websites like Codepen exist which allow you to choose UI elements like tooltips on the basis of how they look, and then download the code that you need to use it on your site.

For example, here’s a tooltip design that looks decent:

And here’s the code that you would need to download from Codepen if you wanted to use that tooltip:

It’s still a lot of HTML and CSS, but at least you didn’t have to come up with all that from scratch.

Note though that all the issues we raised earlier about the work associated with editing existing code still apply.

In other words, although using a template will save you time in creating the tooltip design initially, it won’t save you any time when it comes to editing the tooltip to make it fit with your brand.

And I don’t know about you, but whenever I’ve used templates in the past for web design work, I’ve always ended up tweaking them to make them fit my needs.

So how much time does using templated code really save you at the end of the day?

Wouldn’t it be a better use of time and resources to create tooltips without having to look for templates or mess around with code?

Building a code-free tooltip with Userpilot

Fortunately, in 2022, you don’t need to re-invent the wheel anymore when it comes to tooltips.

There are a number of user onboarding software solutions on the market, including our own tool, Userpilot, that allow you to build tooltips without using any code at all.

For a full list of software options, we recommend that you check out this post.

Tools like Userpilot empower non-technical product marketers, who no longer have to run to their devs every time they want the slightest of changes to the customer experience.

Being able to change how a tooltip looks in 5-10 minutes allows product marketing teams to A/B test different tooltip iterations at high speed.

More product experiments = better onboarding systems in the long run.

How easy is it to install Userpilot?

Extremely easy.

Simply install our Chrome extension. It will take you a couple of minutes, tops.

Then, enter a tiny Javascript snippet. That won’t take you longer than 5-10 minutes, either.

And voila! You can now build tooltips without using code. As well as any other UX patterns you have in mind, by the way.

For a full list of UX patterns to try, check out this post for some inspiration.

How exactly do you build a tooltip with Userpilot?

Well, if you want to try that out for yourself, I would suggest doing a free trial of Userpilot. Since it’s free, you literally have nothing to lose.

But if you want to see what the tooltip creation process looks like, let me show you.

For the purposes of our example, we’ll assume that you want to build a standalone, or “native” tooltip.

So open Userpilot and go to the “Native Tooltips” section.

At the top-right, you’ll see a magenta button saying “Create a New Native Tooltip.” Click on that button, and specify the page on your website that you want the tooltip on.

For this example, we’re building the tooltip on Campfire, which is Userpilot’s demo app.

At the bottom of the screen, you’ll see a button that says “Create New Content.” Click it, and you’ll get the following options:

If you wanted to build a tooltip as part of an experience flow, you’d select the left-hand option. Since this isn’t the case here, let’s click on “Create New Native Tooltip” instead.

Userpilot will now take you back to the page you wanted to build the tooltip on.

Click “Create,” and there you have it: your very own tooltip!

From here, Userpilot will allow you to customize the text, the color, the style… anything you like, really.

Unlike other products on the market, you don’t need to use custom CSS to make tooltips fit your brand.

I’m entirely non-technical and the above process was extremely easy for me to learn.

Conclusion

Now that you’ve finished reading this article about tooltips, you should be able to:

• Recognize what tooltips look like
• Understand what websites use tooltips for
• Avoid the time sink of building tooltips from scratch
• Choose software to help you create tooltips code-free

We hope that you’ll choose Userpilot! It’s very easy to use, as the above screenshots show.

As well as tooltips, you can also build hotspots, modals, slideouts, or any other element you need.

To get started with Userpilot today, click on the banner below this article.