To display any additional info on moving the mouse cursor over an element, the CSS Tooltip is used.
Example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted red;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: crimson;
color: white;
text-align: center;
padding: 5px;
position: absolute;
z-index: 5;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
<span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>
Explanation:
In the above example, we are creating a basic tooltip. Move the cursor of the mouse over the element to see the tooltip.
Ways to display the position of the tooltip information:
- The top of the element
- The left side of the element
- The right side of the element
- The bottom of the element
Top Tooltip:
The tooltip information renders on the top of an element, on moving the mouse cursor over the element.
Example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted red;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: crimson;
color: white;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 5;
bottom: 100%;
left: 50%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
<span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>
Explanation:
In the above example, we are creating a top tooltip. Move the cursor of the mouse over the element to see the tooltip.
Bottom Tooltip:
The tooltip information renders on the bottom of an element, on moving the mouse cursor over the element.
Example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 5px dotted red;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: crimson;
color: white;
text-align: center;
padding: 5px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
<span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>
Explanation:
In the above example, we are creating a bottom tooltip. Move the cursor of the mouse over the element to see the tooltip.
Left Tooltip:
The tooltip information renders on the left side of an element, on moving the mouse cursor over the element.
Example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 5px dotted red;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: crimson;
color: white;
text-align: center;
padding: 5px;
position: absolute;
z-index: 2;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
<span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>
Explanation:
In the above example, we are creating a left tooltip. Move the cursor of the mouse over the element to see the tooltip.
Right Tooltip:
The tooltip information renders on the right side of an element, on moving the mouse cursor over the element.
Example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted red;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: crimson;
color: white;
text-align: center;
padding: 5px;
position: absolute;
z-index: 2;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Hover the mouse over the below text.</p>
<div class="tooltip">Message for you!!
<span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>
Explanation:
In the above example, we are creating the right tooltip. Move the cursor of the mouse over the element to see the tooltip.