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

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads