i

Learn HTML and CSS in 10 Days

CSS Tooltip Animation

The use of CSS fade in tooltip helps in fading the tooltip text whenever it is visible. The "opacity" property, along with the "transition" property, also helps in attaining fade in tooltip.

Let’s take an example.

tooltip { 

position: relative; 

display: inline-block; 

border-bottom: 1px dotted black; 

.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; 

}