CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

CSS Tooltip Animation/ Fade In Tooltips

The CSS fade in tooltip or tooltip animation is used to fade in the tooltip text when it is about to visible. The CSS3 "transition" property along with "opacity" property is used o attain fade in tooltip or tooltip animation. The animation time from being completely invisible to 100% visible is specified in second.

Let's take an example to demonstrate the CSS tooltip animation. In this example, the fade in time is 5 second.

See this example:

<!DOCTYPE html>
<html>
<style>
.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;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

Test it Now

Next TopicCSS Tooltips with Arrow

← prev next →

Hot Tutorials

Contact US

Email:[email protected]

CSS Tutorial

CSS Properties

CSS Advance

CSS Design

CSS Questions

Miscellaneous

CSS MCQ

Interview Questions

CSS Tooltip Animation/ Fade In Tooltips

Hot Tutorials

Contact US