Introduction
A tooltip is a common graphical user interface element found on some websites. It's used to provide additional information to the user when they interact with a portion of text with their mouse or by touch. In this tutorial, you'll learn how to create it with HTML and CSS.
The HTML
The tooltip text is contained within a portion of other text on a web page, most of the time, this text is a paragraph therefore, the HTML span
tag is used to enclose it.
<!-- Do not forget the meta tags -->
<div class="tooltip">
Hover over me <span class="tooltiptext">This is a tooltip</span>
</div>
The CSS
In the HTML above the tooltip text is part of the flow of the text which means when it's rendered by the browser it will appear beside the text "Hover over me". The desired effect is to hide the text, and show it over the text Hover over me when the user interact with it.
In order to achieve this, you have to hide the tooltip text; take it out of flow before you can position it over the text: Hover over me.
First, you have to change the position
property of the tooltip parent container to relative
because when you take the tooltip text out of flow, you'll have to position it relative to its parent and not the browser's viewport. In addition, you'll add a bottom border to serve as an indication that there is an information hidden from sight.
Furthermore, the display
property is changed to inline-block
. This prevents the tooltip parent from spanning the entire browsers' viewport.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
Now, you can position the tooltip text. Since the parent container has a position relative
, the tooltip text can have its position set to absolute
. Therefore, you can use offset properties to accurately position it over the text Hover over me. Finally, you'll like the tooltip text to appear over its parent text all the time, z-index
takes care of this. The remaining styles are cosmetics.
.tooltip .tooltiptext {
position: absolute;
bottom: 125%;
left: 50%;
visibility: hidden;
z-index: 1;
/* Cosmetics */
color: #fff;
background-color: #555;
width: 120px;
text-align: center;
padding: 5px 0;
margin-left: -60px;
border-radius: 6px;
opacity: 0;
transition: opacity 1s;
}
In its current state, the tooltip is hidden, but before you write styles that will show it when the user interacts with it, you need to create a tiny indication that'll show the user that the tooltip text belongs to the text Hover over me, sort of like when a human is holding a board which reads: I am human.
In order to achieve this, you'll use CSS pseudo-elements specifically ::after
.
.tooltip .tooltiptext::after {
/* Read on for the code and explanation */
}
First, you set its content to empty, and change the position to absolute
. Afterwards, you move the indicator to the center of the tooltip text and its parent text. Next, you use borders to create the indicators. Finally, when the user touches the text or mouse over it, you change the visibility
and opacity
to visible
and 1
respectively.
.tooltip .tooltiptext::after {
position: absolute;
content: "";
/* Move it to the center */
top: 100%;
left: 50%;
/* This creates the indicators */
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent;
}
/**
* Show the tooltip when you mouse over the
* tooltip container
*/
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
The completed tooltip is shown in the GIF below:
You can check it online.
The GitHub repo for this series:
ziizium / my-webdev-notes
Code snippets for series of articles on DEV about my experiments in web development
My WebDev Notes
This repositiory contains code snippets, and links for series of articles on DEV about my experiments in Web development.
List of articles
- My WebDev Notes: CSS Loaders published on the 25th February 2020
- My WebDev Notes: Filter table published on the 1st April 2020
- MyWebDev Notes: Center page elements with CSS Grid published on the 3rd of April 2020
- My WebDev Notes: Photo gallery with CSS Grid published on the 7th of April 2020
- My WebDev Notes: Fullscreen overlay navigation published on the 13th of April 2020
- My WebDev Notes: A simple and accessible accordion published on 28th of April 2020
- My WebDev Notes: How to create a tooltip with HTML and CSS published on 3rd February 2021
- How to create a modal published on 22nd June 2021
Credits
Cover photo by Ferenc Almasi on Unsplash.
Top comments (5)
Nice post! One question though: is there a specific reason you didn't use an attribute with the tooltip text and
attr
to grab that text for thecontent
?I never thought of that 🙃.
If you have the time to provide the code for that, I'll really appreciate it, afterwards, I'll update the post with your comment.
I will send you an example in a bit!
Here is an example: jsfiddle.net/xt8zvapc/
I tried to keep it the same as yours as much as possible.
Hello, good day to you, and thanks for your patience.
Your technique worked, but it did not pass W3 markup validation service because you used a
tooltip
attribute in your HTML which works but not allowed at the time of writing (see the image below).I changed the
tooltip
attribute todata-tooltip
in the HTML, and it passed the validation test because data attributes are allowed on an element likediv
.If you can find time, kindly update the fiddle using
data-tooltip
in your HTML, and update the CSS accordingly.Let me know when you are done, I'll update the post as soon as possible.
Once again, thanks for your contribution and patience (I still can't believe it's over a month 😱).