CSS Tooltip
The CSS tooltip is used to display a piece of additional information about an element when you move the cursor over that particular element. Basically, it is a small pop-up window that appears only when you move the mouse over the particular link or element.
Example: How to create Tooltip in CSS
In this example, we have demonstrated how to create a tooltip. So we have specified the .tooltip class for tooltip and set all the styling properties related to tooltip element in it, and then we have specified another class .tooltiptext for the tooltip pop-up window and also set all the styling properties related to the pop-up window in it, as you can see in the example given below:
<!DOCTYPE html>
<html>
<head>
<title>CSS Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
font-size: 30px
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Output
As we can see in the output image, the Tooltip text within the black rectangular box is a tooltip window that appears when we move the cursor over the text "Hover over me"
Tooltip Arrow in CSS
The tooltip arrow consists of the tooltip popup window with an arrow that should appear from a specific side of the tooltip. You can set the position of the tooltip and arrow on their own using top, bottom, left, and right property.
Example of creating tooltip arrow
In the given example, we have demonstrated the tooltip arrow which is positioned at the bottom of the element with an arrow at its top.
<!DOCTYPE html>
<html>
<title>CSS Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
font-size: 30px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Output:
As we can see in the output, the tooltip window consists of a little triangle at the top of it, this little triangle is a arrow which is pointing to the text "Hover over me". The tooltip window appears when we move the cursor over the text "Hover over me".
Specifying Tooltip Position in CSS
The CSS allows us to position the tooltip popup window according to our needs and the space available on the web page. While specifying the position of the tooltip window we should keep in mind that any other information of the webpage will not get hidden when the tooltip window is displayed on the web page. We can position the tooltip window to the top, bottom, left, and right of the element on the web page.
Example of specifying the position of Tooltip
In this example, we have demonstrated how we can set the position of the tooltip pop-up window. We have set the position of the tooltip window to the right of the element but we can also set the position at the left, top, and bottom of the element.
<!DOCTYPE html>
<html>
<head>
<title>CSS Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
font-size: 30px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Output:
As we can see in the output, the tooltip window is on the left of the text "Hover over me".
Animated Tooltips in CSS
The animated tooltips are those which have some animation effect. The tooltips that are created above are with simple backgrounds but the animated tooltip pop-up window consists of some animation effects such as fade-in effect, fade-out effect etc.
Live Example of Animated Tooltip
This live example demonstrates that when you move the cursor over the text, the tooltip will first fade-in then it takes 1 second to get back to the actual state.
Conclusion
In this lesson, we have learned how to add a popup window to provide the additional text and information along with the HTML elements. We have also learned how to style them using CSS property, can set their positions to the top, left, bottom or right of the element and provide the animation effect to the tooltip window.
