CSS Tooltip Animation

The CSS fade-in tooltip effect is implemented to gradually display the tooltip text as it becomes visible. This effect utilizes the CSS3 "transition" property in conjunction with the "opacity" property to achieve the fade-in animation. The duration of the animation, transitioning from fully transparent to fully visible, is defined in seconds.

Let's consider an illustration to showcase the CSS tooltip animation. In this instance, the duration for fading in is set to 5 seconds.

See this example:

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 C# Programming</strong>

<span class="tooltiptext">A solution of all technology.</span>

</div>

</body>

</html>

Input Required