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.
![Download Now: How to Land a Developer Role in the World of AI [Free Checklist]](https://no-cache.hubspot.com/cta/default/53/8d6a0803-23b3-44d8-a193-5da3a6e366a7.png)
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 classhover-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.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
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.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
![HTML Projects for Beginners: How to Create a Personal Portfolio Page [Step-by-Step]](https://www.hubspot.com/hubfs/personal_portfolio.png)
![How to Embed Google Map in HTML [Step-By-Step Guide]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/How%20to%20Embed%20Google%20Map%20in%20HTML%20%5BStep-By-Step%20Guide%5D-2.jpeg)
![How to Make an HTML Text Box [Examples]](https://www.hubspot.com/hubfs/html-text-box.webp)
