How to Create an HTML Tooltip [+ Code Templates]

Imagine you’re on a website or web app and see an icon, instruction, or form field that you don’t quite understand. If you’re like a lot of people, you’ll instinctively hover your mouse over the element looking for a small pop-up that provides more information.

What you’re looking for is called a tooltip. Tooltips are a core component of user interfaces, as they allow designers to add microcopy to a web page without cluttering the display. Tooltips are great in forms, checkout flows, tutorials, and other flows where users may have more questions than usual.

In this post, we’ll show you how to create a simple tooltip in HTML, which you can easily place on your website and keep visitors on track.

What is a tooltip in HTML?

A tooltip is a user interface component containing text that appears when a user hovers their cursor over an element. A tooltip usually contains text that provides additional description, context, or instructions that users may want to know.

Tooltips are ideal for bits of text that can be hidden to save space on the page, but are easily accessible when users need them. For example, a tooltip can appear when a user hovers over a menu item or icon to explain the purpose of the button.

You should try to avoid tooltips whenever possible in favor of page content that clearly communicates the purpose of each element. Still, there may be times when a bit more info is necessary, and tooltips are great for this.

On mobile devices, tooltips usually appear after pressing or holding an element on the screen.

How to Make a Tooltip in HTML

There are several ways to create a tooltip with pure HTML and CSS. In this section, we’ll explain a few methods, as well as how to add some effects to your tooltip for a better user experience.

To make a simple tooltip, we’ll first create the HTML element that triggers the tooltip when hovered over. We’ll create this element as a div and assign it the class hover-text.

Next, we’ll create the element for the tooltip itself. This will be a span element with the class tooltip-text. Place this element inside the hover-text div to associate the tooltip element with a parent div.

Finally, we’ll apply CSS to our elements to give the tooltip its behavior. Most importantly, we hide the tooltip-text class with visibility: hidden and place it on the layer above other page content with z-index: 1. We’ll also use the hover pseudo-class on hover-text to display the tooltip only when a hover event occurs.

Tooltips can also appear above, below, or to the left or right of the parent element. In the example below, I’ve created four different tooltips to demonstrate how each looks:

See the Pen HTML tooltip: example by HubSpot (@hubspot) on CodePen.

How to Make a Tooltip With an Arrow

An arrow can help visually link your tooltip to its parent element, making it look like the element is “speaking” to the user.

To add an arrow to your tooltip, you can use ::before. This creates a pseudo-element that is the first child of the element it’s attached to (in this case, elements with the tooltip-text class).

This new pseudo-element is essentially an empty element with some padding, rotated 90 degrees and positioned in a way that makes the tooltip appear like a speech bubble. Also, note that the z-index of tooltip-text is set to 2. This ensures our pseudo-element always appears behind the tooltip bubble and doesn’t obscure the tooltip text.

See the Pen HTML tooltip: example with arrows by HubSpot (@hubspot) on CodePen.

How to Add Effects to Tooltips

You might also want to add some extra effects to enhance your tooltips. Two popular options are adding a fade effect and slightly delaying the appearance of the tooltip.

To make your tooltip fade in and out of view, we’ll use the CSS opacity property paired with the CSS transition property. The opacity of tooltip-text is initially set to 0, meaning the element is invisible. When a hover event occurs, its opacity is set to 1 and transition: opacity 0.5s adds a smooth fade-in/fade-out effect. You can change the duration of the transition to your preference.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

Download for free

Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now

Learn more

Adding a delay to tooltips is common as well — it keeps the tooltip from appearing every time the cursor passes over the element. To add a delay to your transition, use the transition-delay property along with the transition property. You can set the delay duration to your preference.

Both effects are shown in the example below:

See the Pen HTML tooltip: example with effects by HubSpot (@hubspot) on CodePen.

How to Make a Tooltip With an Image

It’s also easy to add tooltips to images. To do it, put your tooltip text in a title attribute inside the image tag. All modern browsers have a built-in function that displays the image title as a tooltip.

Try hovering your cursor over the image in the example below:

See the Pen HTML tooltip: image example by HubSpot (@hubspot) on CodePen.

Creative HTML Tooltip Examples

The above examples are pretty basic, and you don’t need to get fancier for that for an effective tooltip. But, if you want to add some extra visual flair, check out these examples below for some more inspiration.

Pure CSS tooltip (source):

See the Pen Pure CSS tooltip by Rude (@rudeayelo) on CodePen.

Social Media Icons with Popups (source):

See the Pen Social Media Icons with Popups (HTML + Pure CSS Only) by Abdelrhman Said (@abdelrhmansaid) on CodePen.

Animated CSS Tooltip Concept (source):

See the Pen Animated CSS Tooltip Concept by Sasha (@sashatran) on CodePen.

Tips for HTML Tooltips

When crafting the content of your page, you should aim to give users all the information they need just by looking at the page whenever possible. However, sometimes users need some extra help.

That’s why tooltips are an important UI component for websites and web applications — They give users additional information when they need it without cluttering the interface. With some quick HTML and CSS, they’re simple to add to any page. And by sprinkling some extra effects, you can make them another small delight moment to win users over.