Tooltip in CSS with fading animation

Asked 15-Jul-2021
Viewed 502 times

0

How to add CSS tooltip with a fading animation? Explain with the help of example?


1 Answer


1

Animated tooltip is text that pops up when you hover over a particular element that contains some information. You can see this popup on a product page, delivery page or anywhere else in an several websites.
Let's understand with the help of an example :
<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>Tooltip | Mindstick</title>
    <style>
        .d-flex {
            display: flex;
        }
        .justify-content-center {
            justify-content: center;
        }
        .align-items-center {
            align-items: center;
        }
        .flex-column {
            flex-direction: column;
        }
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }
            .tooltip .tooltiptext {
                visibility: visible;
                width: 120px;
                background-color: #f0ad4e;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px 0;
                position: absolute;
                z-index: 1;
                bottom: 100%;
                left: 50%;
                margin-left: -60px;
                opacity: 0;
                transition: opacity 2s;
            }
            .tooltip:hover .tooltiptext {
                visibility: visible;
                opacity: 1;
            }
    </style>
</head>
<body>
    <section class='d-flex justify-content-center flex-column align-items-center'>
        <h2>Animated Tooltip Example</h2>
        <p>Move your mouse cursor over the below heading</p>
        <div class='tooltip'>
            <strong> Welcome to Mindstick Software Private Limited</strong>
            <span class='tooltiptext'>Unleash your imagination</span>
        </div>
    </section>
</body>
</html>
Hope this makes you understand about Tooltip easily.
Happy Coding!