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 →