When a tooltip is visible, we can fade in the tooltip text using the CSS Tooltip animation. Hence, it is often known as the Fade in tooltips. It is achieved using the CSS3 “transition” property along with the “opacity” property. The time duration for the animation is specified in seconds.
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;
bottom: 100%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 2s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</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 using the CSS tooltip animation for a time duration of 2 seconds.