Home >>CSS Tutorial >CSS Tooltip Animation

CSS Tooltip Animation

CSS Tooltip Animation/ Fade In Tooltips

The CSS tooltip animation or fade in tooltip is used to define fade in the tooltip text when it is about to be visible. You can use the CSS3 "transition" property together with the "opacity" property, and it is go to 100% visible in specified time from completely invisible.

Let's take an Example of the CSS tooltip animation/Fade in tooltip in 5 second:

<!DOCTYPE html>  
<html>  
<style>  
.hoverme {  
    position: relative;  
    display: inline-block;  
    border-bottom: 1px dotted black;  
}  
.hoverme .hovertext {  
    visibility: hidden;  
    width: 150px;  
    background-color: #f27718;  
    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;  
}  
.hoverme:hover .hovertext {  
    visibility: visible;  
    opacity: 1;  
}  
</style>  
<body>  
<h2>Fade In Tooltip Example</h2>  
<p>keep your mouse cursor over the below text</p>  
<div class="hoverme"><strong> HOVER ME..</strong>  
<span class="hovertext">Welcome to phptpoint</span>  
</div>  
</body>  
</html>
Output:

Fade In Tooltip Example

keep your mouse cursor over the below text

HOVER ME.. Welcome to phptpoint