Create a Tooltip Button Animation using HTML and CSS

Last Updated : 30 Jan, 2024

The Tooltip Animation can be implemented to display additional information about a user or profile when hovering over a designated button or icon. Animations, like tooltips and button animations, add a layer of interactivity to the user interface, making the experience more engaging and enjoyable.

Preview

gfg

Approach

Create an HTML element such as h1, h3, a, span, and div to structure content. Specifies the font family ‘Poppins’ for the entire document.
Defines styles for the tooltip animation on the profile icon. Uses absolute positioning and transitions for smooth animation. Includes a hover effect with a rotation and skew transformation on a layered structure.
Styles for the main profile box and its nested elements. Utilizes absolute positioning for layered content.
Utilizes Font Awesome icons for Instagram, Twitter, Facebook, LinkedIn, and YouTube.
Implements a hover effect to reveal additional details (box1).

Example: Illustration of Tooltip Button Animation using HTML and CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
          "width=device-width,initial-scale=1.0"> 
    <title>Tooltip Button Animation </title> 
    <link rel="stylesheet" 
          href="index.css"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> 
</head> 
  
<body> 
    <div style="position: absolute; top: 10vh; padding: 0 20px;"> 
        <h1>GeeksforGeeks</h1> 
        <h3>GfG Profile Tooltip Button Animation </h3> 
    </div> 
    <div class="box"> 
        <div class="box1"> 
            <div class="box2"> 
                <div class="box3"> 
                    <div class="img"> 
                        <img src= 
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" 
                             alt="gfg"> 
                    </div> 
                    <div class="details"> 
                        <div class="name"> 
                            GeeksforGeeks 
                        </div> 
                        <div class="coursename"> 
                            DSA|| MERN|| Angular || PhP 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <div class="text11"> 
            <a class="icon"> 
                <div class="layer"> 
                    <span></span> 
                    <span></span> 
                    <span></span> 
                    <span></span> 
                    <span></span> 
                    <span></span> 
                    <span></span> 
                    <span></span> 
                    <span style="background-color: rgb(21, 52, 22);"> 
                        <img src= 
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                             style="width: 50px; height: 50px; 
                                    padding: 3px;" 
                             alt="gfg"> 
                    </span> 
                </div> 
                <div class="text11"> 
                    GeeksforGeeks 
                </div> 
            </a> 
        </div> 
  
    </div> 
    <div class="follow1"> 
        <div class="follow2"> 
            <h2 class="followtext"> 
                Follow us on 
            </h2> 
            <div class="icons_box"> 
                <a href="https://www.instagram.com/geeks_for_geeks/"> 
                    <i class="fa-brands fa-instagram"></i> 
                </a> 
                <a href="https://twitter.com/geeksforgeeks"> 
                    <i class="fa-brands fa-twitter"></i> 
                </a> 
                <a href="https://www.facebook.com/geeksforgeeks.org/"> 
                    <i class="fa-brands fa-meta"></i> 
                </a> 
                <a href="https://in.linkedin.com/company/geeksforgeeks"> 
                    <i class="fa-brands fa-linkedin-in"></i> 
                </a> 
                <a href="https://www.youtube.com/geeksforgeeksvideos"> 
                    <i class="fa-brands fa-youtube"></i> 
                </a> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

/* index.css*/
@import url( 
'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 
  
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
body { 
    background: #2a452b; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
    font-family: 'Poppins', sans-serif; 
} 
  
.box { 
    position: relative; 
    cursor: pointer; 
    transition: all 0.9s; 
    font-size: 17px; 
} 
  
.box1 { 
    position: absolute; 
    top: 0; 
    transform: translateX(-60px); 
    padding: 10px; 
    opacity: 0; 
    pointer-events: none; 
    transition: all 0.7s; 
    border-radius: 5px 40px 5px; 
    border: 2px solid #fff; 
    box-shadow: rgba(241, 245, 241, 0.25) 0px 30px 60px -12px inset, 
                rgba(242, 238, 238, 0.3) 0px 18px 36px -18px inset; 
} 
  
.box2 { 
    background: green; 
    border-radius: 5px 40px 5px; 
    padding: 10px; 
    border: 1px solid rgb(221, 228, 232); 
} 
  
.box:hover .box1 { 
    top: -150px; 
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto; 
} 
  
.layer { 
    width: 55px; 
    height: 55px; 
    transition: transform 0.9s; 
} 
  
.icon:hover .layer { 
    transform: rotate(-25deg) skew(10deg); 
} 
  
.layer span { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    border: 1px solid #8fc681; 
    border-radius: 10px; 
    transition: all 0.9s; 
} 
  
.layer span, 
.text11 { 
    color: rgb(163, 213, 163); 
    border-color: #a4c9a3; 
    font-size: 30px; 
    font-weight: 900; 
} 
  
.icon:hover.layer span { 
    box-shadow: -1px 1px 3px #2fbc2f; 
} 
  
.icon .text11 { 
    position: absolute; 
    left: 50%; 
    opacity: 0; 
    font-weight: 500; 
    transform: translateX(-50%); 
    transition: bottom 0.8s ease, opacity 0.8s ease; 
} 
  
.icon:hover .text11 { 
    bottom: -55px; 
    opacity: 1; 
} 
  
.icon:hover .layer span:nth-child(1) { 
    opacity: 0.2; 
} 
  
.icon:hover .layer span:nth-child(2) { 
    opacity: 0.4; 
    transform: translate(4px, -4px); 
} 
  
.icon:hover .layer span:nth-child(3) { 
    opacity: 0.6; 
    transform: translate(8px, -8px); 
} 
  
.icon:hover .layer span:nth-child(4) { 
    opacity: 0.8; 
    transform: translate(12px, -12px); 
} 
  
.icon:hover .layer span:nth-child(5) { 
    opacity: 1; 
    transform: translate(17px, -17px); 
} 
  
.layer span.fab { 
    font-size: 30px; 
    line-height: 64px; 
    text-align: center; 
    fill: #1da1f2; 
    background: #000; 
} 
  
.box3 { 
    display: flex; 
    gap: 6px; 
} 
  
.img { 
    width: 70px; 
    height: 50px; 
    font-size: 25px; 
    font-weight: 700; 
    border: 2px solid #204410; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #fff; 
} 
  
.name { 
    font-size: 17px; 
    font-weight: 700; 
    color: rgb(120, 222, 87); 
} 
  
h1, 
h3 { 
    text-align: center; 
    color: aliceblue; 
} 
  
.details { 
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    flex-direction: column; 
    gap: 0; 
    color: #fff; 
} 
  
.about { 
    color: #ccc; 
    padding-top: 5px; 
} 
  
.follow1 { 
    color: aliceblue; 
    align-self: center; 
    position: absolute; 
    bottom: 15vh; 
} 
  
.follow2 { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    gap: 2vh; 
} 
  
.followtext { 
    color: aliceblue; 
    font-size: 30px; 
    text-align: center; 
} 
  
.icons_box { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10vh; 
} 
  
i { 
    color: aliceblue; 
    font-size: 30px; 
    transition: 0.3s ease; 
  
} 
  
i:hover { 
    color: rgb(191, 232, 200); 
    scale: 1.5; 
}