How To Create A Tooltip With HTML, CSS or No Code [EASY]

If you’re a product manager or marketer who wants to highlight a particular feature of your product, you’ve probably thought about using tooltips.

Here’s the problem: it’s not always easy to create a tooltip without using code!

This means that creating tooltips often ends up being a frustrating experience, or a drain on scarce developer resources.

Fortunately, there are ways to create tooltips without requiring coding knowledge. Let’s dive in!

What are tooltips?

A tooltip is a short description that is linked to an element of your product. The purpose of tooltips is to explain to users what particular features of your UI do, especially when those features are unfamiliar or not immediately intuitive.

On desktop, tooltips normally appear when the user hovers the mouse over the element in question. On mobile, tooltips generally appear when the user taps and holds the element.

In both cases, the tooltip will disappear once the user moves their mouse or finger away, or after a few seconds have passed.

What are native tooltips?

Userpilot offers two ways to create tooltips: either as part of an experience flow or as a standalone tooltip.

Here’s a screenshot from our app that shows you both options:

We call the standalone tooltip a “native tooltip” – because it becomes a part of your native UI.

Because they don’t require the user to go through a complex experience flow before displaying, native tooltips are best used to show the customer elements that are fairly straightforward.

Here are some examples of where native tooltips might be useful:

• If you want to provide more subtle help that displays based on a feature that the user decides to scroll over.
• If you want to highlight and explain a less obvious element of your UI:

• A hint that is intended to display permanently.
• A commonly used hotspot.

For more complex use cases, Userpilot also allows you to build tooltips into longer experience flows. Here’s what that looks like in our app:

Building tooltips into longer experience flows could be useful in the following scenarios:

• A welcome flow that highlights the features the customer needs to learn in order to activate.
• An announcement of a new feature, page, or view.
• Nudging the user towards certain features in a manner conditional upon their past in-app behavior.

What are tooltips used for in SaaS products?

Whether you build them as a standalone element or as part of a larger experience flow, tooltips have a number of applications at every stage of the user journey.

1. Activation

At the start of the user journey, when the customer is learning the product, tooltips are a great way to point the user to the features they need to experience in order to activate.

Here’s a concrete example.

Postfity is a social media scheduling tool. To activate, users first need to connect their social media accounts to the tool. Postfity encourages users to connect their accounts during onboarding using a tooltip.

2. Upsells

SaaS businesses generally make most of their revenue from retaining customers for a long time and upselling them. This is the so-called ‘expansion revenue’.

So a tooltip could be a helpful way to showcase an upsell to an existing customer.

In this example, the tooltip urges users to sign up for an onboarding call to discuss multichannel prospecting ads, which is an upsell. The blue tooltip only appears when the user mouses over the white lightbox.

3. Feature adoption

Further along the line, you could consider using tooltips to introduce users to new features as they are released. You might think of this as secondary or “evergreen” onboarding.

When the like button on Facebook came out, only one reaction was possible: the ‘like’. After Facebook released the ability to react to posts in multiple different ways, they used the tooltip above to highlight this new feature to their users.

How to create a tooltip without coding knowledge

Now that you know why tooltips are useful, here’s how you can use Userpilot to easily build them. Want to see this live? Book a free demo today!

1. Building a native tooltip

First, open up Userpilot and go to the ‘Native Tooltips’ section in the Engage part of the app.

Click on ‘Create New Native Tooltip’, and enter the URL of the page you want to build on.

You’ll be taken to the page you just entered. In this example, we’ve chosen to build the tooltip in Campfire, Userpilot’s demo app.

Click on the button that says ‘Create New Content’, then click ‘Create’. The following screen should pop up:

Click ‘Create a New Native Tooltip’. Userpilot will then take you back to the page you said you wanted to build the tooltip on. You’ll next be asked to select the element you want to put the tooltip on.

Once you’ve selected your chosen element, the following screen will pop up:

Just click ‘Create’ for now – it will be easier to customize your tooltip once you can see where it is. And voila: here’s the tooltip we just built!

Right now, the tooltip is obstructing the rest of the UI and making it impossible to read. That’s easy to solve – simply play with the ‘Placement’ and ‘Place Element’ features on the right-hand side until you find something that looks good.

There, much better. But the text that’s showing is still placeholder text – how can you change that?

Simply mouse over the tooltip and you’ll see an orange edit button.

Click it and you’ll be able to input your desired text. Make it short and snappy!

Hit the green checkmark to save your work.

Then, use the ‘Preview’ and ‘Publish’ buttons at the bottom-right to review and to release your new tooltip.

2. Create a tooltip as part of a flow

Ready to level up?

Start by going to the ‘Experiences’ section in the Engage part of Userpilot.

As per the previous example, click ‘Create New Experience’, and enter the page you want to start the Experience on.

The page we’re going to choose is the home page of the fictional Campfire app.

Campfire is a project management app, so a really important step to get users to activate is to make them set up their first project. Let’s create an experience flow that accomplishes this goal and involves a tooltip.

First step: we want to create a welcome screen. Click ‘Create New Content’, then ‘Create New Experience’. After choosing a color scheme, you’ll reach this screen:

Click ‘Add Step’, and select ‘Modal’ from the options.

Choose from one of the available welcome screen templates:

And customize your welcome screen until it looks the way you want it to.

Note: if you hover over the CTA button (in this case “Let’s Go”) and use the orange edit feature, you will notice the link points to the “Next Step” in the experience by default. If you’d like to change it to e.g. take the user to a specific URL – either within your app or elsewhere – simply change the destination linked to the button.

Click on the green checkmark to save your changes, and then it’s time to make the next part of the flow.

For the sake of this example, we’re going to take the user to the Scrum Board part of Campfire and push them to create a new project.

Click ‘Add Step’, and click on ‘Page Change’:

Once we’ve input the Scrum Board page, the software knows to take the user to that page after they’ve finished the welcome screen.

Now it’s time to create our tooltip!

Click ‘Add Step’ again, and this time clicks on ‘Tooltip’.

Click on your UI at the area where you want your tooltip to appear. You’ll then be encouraged to select a tooltip from a pre-existing template:

This is what the Standard tooltip looks like in our example:

As with the native tooltip example, the tooltip is in the way of the rest of the UI, so let’s use the Placement and Place Element features to fix that.

Better. And now let’s edit the text by hovering over it so that the tooltip provides a useful hint for our user.

And there we have it! That’s how easy it is to create a welcome flow that involves a tooltip.

All this is possible in Userpilot without any coding. If you want to see these steps in action book a free demo today, or if you’d like to give it a spin yourself, sign up for a free trial!

If you’re feeling intrepid and want to build a tooltip using code, read on…

How to create a tooltip in HTML

We warned you: it’s not easy unless you’re technically minded!

Here’s an example of an HTML tooltip from our friends over at Educba:

No disrespect, but we think this looks a bit like a website from the 90s. Now let’s have a look at how much code was needed to create this fairly average result:

<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>

That’s a lot of effort for an okay-looking result.

Here are some of the problems with this approach:

• Unlike with Userpilot, there’s no template provided. You have to make everything up from scratch! If you want to find templates, you have to do so on your own initiative.
• Every single tiny aspect of how this tooltip looks has to be specified manually. If you look through the code, there’s padding, positioning, margins, colors, visibility, width, height…. the list goes on.
• There is effectively double the work, as you have to code not only the tooltip text but what happens when you mouse over it.
• …and you have to rinse & repeat every time you want to add a new tooltip somewhere! Imagine if the color, font, or style is different for every new tooltip!
• If you get even one element of your code wrong (and there are lots of elements), your users will be unforgiving.
• Think about all the developer time that would be needed to build something like this. That doesn’t compare very favorably to a tool like Userpilot, where non-technical product managers can produce something professional in about 10 minutes.

How to create a tooltip in CSS

The visual output from CSS tooltips is a bit better than pure HTML, but you still run into many of the same problems we just identified.

Take this example from Codepen:

Not bad-looking.

But here’s a screenshot from the code you need to make this:

The code is actually so long that we figured putting all of it into the article would overwhelm the reader. If you want to view all of it, you can do so here.

Here are the problems we see with this approach:

• CSS templates do exist – sharing those among developers is basically why Codepen exists as a website. But you have to look up the templates manually, as opposed to receiving them in-app with no effort.
• Note again just how many elements there are that need to be specified by the developer manually.
• And think about all the developer time this would take up. Wouldn’t you rather your devs were building your product itself, instead of making the UI easier to use?

Conclusion

The easiest way to build tooltips is without using code. Tooltips are a fantastic piece of UI that your customers will appreciate, but if you ask your devs to spend hours coding them manually, your SaaS business will never get off the ground!

See how easy it is to build tooltips on Userpilot, book a free demo today by clicking the banner below!