/    /  CSS Tooltip Animation

CSS Tooltip Animation

 

The CSS3 “transition” property along with the “opacity” property is used o attain fade in the tooltip or tooltip animation. The animation time from being completely invisible to 100% visible is specified in the second.

 

Example:

 

<!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
font-size:20px;
}
.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: red;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   bottom: 100%;
   left: 50%;
   margin-left: -60px;

   /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
   opacity: 0;
   transition: opacity 5s;
}
.tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip Example</h2>
<h3>Move your mouse cursor over the below heading</h3>
<div class="tooltip"><strong> Welcome to I2Tutorials</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

 

OUTPUT:

 

CSS Tooltip Animation