Imagine you鈥檙e on a website or web app and see an icon, instruction, or form field that you don鈥檛 quite understand. If you鈥檙e like a lot of people, you鈥檒l instinctively hover your mouse over the element looking for a small pop-up that provides more information.
What you鈥檙e 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鈥檒l show you how to create a simple tooltip in HTML, which you can easily place on your website and keep visitors on track.
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.
There are several ways to create a tooltip with pure HTML and CSS. In this section, we鈥檒l 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鈥檒l first create the HTML element that triggers the tooltip when hovered over. We鈥檒l create this element as a div and assign it the classhover-text.
Next, we鈥檒l 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鈥檒l 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鈥檒l 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鈥檝e created four different tooltips to demonstrate how each looks:
See the Pen by 探花精选 () on .
An arrow can help visually link your tooltip to its parent element, making it look like the element is 鈥渟peaking鈥� 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鈥檚 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鈥檛 obscure the tooltip text.
See the Pen by 探花精选 () on .
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鈥檒l 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.
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 by 探花精选 () on .
It鈥檚 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 by 探花精选 () on .
The above examples are pretty basic, and you don鈥檛 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 ():
See the Pen by Rude () on .
Social Media Icons with Popups ():
See the Pen by Abdelrhman Said () on .
Animated CSS Tooltip Concept ():
See the Pen by Sasha () on .
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鈥檚 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鈥檙e simple to add to any page. And by sprinkling some extra effects, you can make them another small delight moment to win users over.