Tooltips Smooth Animation with HTML CSS (Source Code)

Today’s this article will be based on making a Tooltips Smooth Animation with HTML CSS” we can call it.

Namaste

Tooltips Smooth Animation with HTML CSS Demo

Tooltips Smooth Animation with HTML CSS Source Code

Below code should be put between the <body> Your Code Here </body> tags.

.html file code

<!-- Main Container  -->
    <div class="con">
        <!-- Left Tooltip -->
        <div class="con-tooltips left">

            <p>Left</p>
            <div class="tooltips">
                <p>Left</p>
            </div>
        </div>
        <!-- Top Tooltip  -->
        <div class="con-tooltips top">

            <p>Top</p>
            <div class="tooltips">
                <p>Top</p>
            </div>

            <!-- Bottom Tooltip  -->
        </div>
        <div class="con-tooltips bottom">

            <p>Bottom</p>
            <div class="tooltips">
                <p>Bottom</p>
            </div>
        </div>
        <!-- Right Tooltips  -->
        <div class="con-tooltips right">

            <p>Right</p>
            <div class="tooltips">
                <p>Right</p>
            </div>
        </div>
    </div>

Put this code inside <style> Your Code Here <style>tags or into style.css file

.css file code

/* Google Font  */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

/* Start Body  */

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    color: #444;
    background-color: #EEE;
    text-align: center;
}


/* Main Container CSS  */

.con {
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 20%;
    right: 20%;
    align-items: center;
    justify-content: center;
    display: flex;
}


/* Tooltips Box  */

.con-tooltips {
    position: relative;
    background: #3378ff;
    border-radius: 10px;
    color: #fff;
    padding: 0 20px;
    margin: 10px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    cursor: default;
}


/* Tooltip  */

.tooltips {
    visibility: hidden;
    z-index: 1;
    opacity: .40;
    width: 100%;
    padding: 0 20px;
    background: #ff6800;
    color: #ffff;
    position: absolute;
    top: -140%;
    left: -25%;
    border-radius: 10px;
    font: 16px;
    transform: translateY(9px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 3px #ff6800;
}


/* Tooltips After  */

.tooltips::after {
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-radius: 10px;
    border-width: 12px 12.5px 0 12.5px;
    border-color: #ff6800 transparent transparent transparent;
    position: absolute;
    left: 40%;
}

.con-tooltips:hover .tooltips {
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
    transition-timing-function: 0.3s linear;
    animation: popup 1s ease-in-out infinite alternate;
}

@keyframes popup {
    0% {
        transform: translateY(6px);
    }
    100% {
        transform: translateY(1px);
    }
}


/* Hover Tooltips  */

.left:hover {
    transform: translateX(-6px);
}

.top:hover {
    transform: translateY(-6px);
}

.bottom:hover {
    transform: translateY(6px);
}

.right:hover {
    transform: translateX(-6px);
}


/* Left  */

.left .tooltips {
    top: -20%;
    left: -170%;
}

.left .tooltips::after {
    top: 40%;
    left: 90%;
    transform: rotate(-90deg);
}


/* Bottom  */

.bottom .tooltips {
    top: 115%;
    left: -20%;
}

.bottom .tooltips::after {
    top: -17%;
    left: 40%;
    transform: rotate(180deg);
}


/* Bottom  */

.right .tooltips {
    top: -20%;
    left: 115%;
}

.right .tooltips::after {
    top: 40%;
    left: -12%;
    transform: rotate(90deg);
}
Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 39

Leave a Reply

Your email address will not be published. Required fields are marked *

I'm not a robot *Time limit exceeded. Please complete the captcha once again.

Website Design Trends in 2022 5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games