CSS Tooltip
This article introduces how to create tooltips using HTML and CSS.
Tooltips are triggered when the mouse moves over a specified element. Here are four examples:
| Top display<br> Tooltip text | Right display<br> Tooltip text | Bottom display<br> Tooltip text | Left display<br> Tooltip text |
Basic Tooltip
The tooltip is displayed when the mouse moves over the specified element:
HTML Code:
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Dotted line on hover */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Positioning */
position: absolute;
z-index: 1;
}
/* Show tooltip on mouse hover */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Mouse over me
<span class="tooltiptext">Tooltip text</span>
</div>
Example Analysis
HTML) Use a container element (like <div>) and add the "tooltip" class. Display tooltip information when the mouse moves over the <div>.
Place the tooltip text inside an inline element (like <span>) and use class="tooltiptext".
CSS) The tooltip class uses position:relative, and the tooltip text needs to be positioned with position:absolute. Note: More positioning examples will be shown in the following instances.
The tooltiptext class is used for the actual tooltip text. It is hidden by default and displayed when the mouse moves over the element. It includes some styles for width, background color, font color, etc.
The CSS3 border-radius property is used to add rounded corners to the tooltip.
The :hover selector is used to display the tooltip when the mouse moves over the specified <div> element.
Positioning the Tooltip
In the following examples, the tooltip is displayed to the right of the specified element (left:105%).
Note that top:-5px is used to position it in the middle of the container element. The number 5 is used because the top and bottom padding of the tooltip text is 5px.
If you modify the padding values, the top value should also be modified accordingly to ensure it is centered.
The same principle applies when the tooltip is displayed on the left.
Display on the Right:
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Display on the Left:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
If you want the tooltip to be displayed at the top and bottom, we need to use the margin-left property and set it to -60px. This number is calculated by using half the width for centering, i.e., width/2 (120/2 = 60).
Display at the Top:
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half the width (120/2 = 60) to center the tooltip */
}
Display at the Bottom:
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half the width (120/2 = 60) to center the tooltip */
}
Adding an Arrow
We can use the CSS pseudo-element ::after and the content property to create a small arrow indicator for the tooltip. The arrow is made of borders, but combined, it makes the tooltip look like a speech bubble.
The following example demonstrates how to add a bottom arrow for a tooltip displayed at the top:
Top Tooltip/Bottom Arrow:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* Position the arrow at the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* Tooltip bottom */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Example Explanation
Positioning the arrow inside the tooltip:top: 100%, the arrow will appear at the bottom of the tooltip. left: 50% is used to center the arrow.
Note: The border-width property specifies the size of the arrow. If you change it, you must also change the margin-left value. This ensures the arrow is centered.
border-color is used to transform the content into an arrow. The top border is set to black, and the others are transparent. If the others are also set to black, it will display as a black rectangle.
The following example demonstrates how to add an arrow to the top of the tooltip, noting the border color setting:
Bottom Tooltip/Top Arrow:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* Tooltip top */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
The following two examples are for arrows on the left and right sides:
Right Tooltip/Left Arrow:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* Tooltip left */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Left Tooltip/Right Arrow:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* Tooltip right */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Fade-in Effect
We can use the CSS3 transition property and opacity property to achieve a fade-in effect for the tooltip:
Fade-in Effect:
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}