CSS Tooltip Fade In Animation

Last Updated : 13 Jun, 2023

The tooltip is used to display information about an element when the mouse has hovered over that element. Tooltips are by default displayed with no delay (animation). To create a tooltip fade-in animation using CSS, you can apply the opacity property to the tooltip element and animate it using CSS transitions or keyframes. Set the initial opacity to 0, and then gradually increase it to 1 to achieve a smooth fade-in effect, enhancing the visibility of the tooltip.

How to add animation to Tooltip?

We can add a fade-in effect to the tooltip text before it becomes visible. This can be done by changing the opacity from 0 to full in a given number of seconds using the transition property in CSS.

Syntax:

.tooltip .tooltip_text {
    opacity: 0;
    transition: opacity 3s;
}

.tooltip:hover .tooltip_text {
    visibility: visible;
    opacity: 1;
}

Example: In this example, we are using the above-explained method.

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            color: green;
            font-size: 30px;
        }

        .tooltip .tooltip_text {
            visibility: hidden;
            font-size: 15px;
            padding: 5px;
            background-color: #cceabb;
            color: black;
            text-align: center;
            position: absolute;
            z-index: 1;
            top: 120%;
            left: 5%;
            opacity: 0;
            transition: opacity 3s;
        }

        .tooltip .tooltip_text::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -6px;
            border-width: 8px;
            border-style: solid;
            border-color: transparent transparent #cceabb transparent;
        }

        .tooltip:hover .tooltip_text {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="tooltip">GeeksforGeeks
        <span class="tooltip_text">
            A Computer science portal for geeks
        </span>
    </div>
</body>
</html>

Output:

Initially, the opacity of tooltip text is set to 0 and then the transition is applied to the opacity with a delay of 3s. When we hover over the "GeeksforGeeks" text, the tooltip becomes 100% visible in 3s. This leads to a fade-in effect/ animation.

riyakalra59

Improve

Article Tags :

CSS Tooltip Fade In Animation

Similar Reads

Thank You!

What kind of Experience do you want to share?