Icons with dual tooltips are one of the trends in web design that can help in increasing the engagement of people.

Social Media Icons with Dual Tooltips Using HTML and CSS (Free Source Code)

Byjvcodes

Icons with dual tooltips are one of the trends in web design that can help in increasing the engagement of people. These icons show not only the profile name written above the icon but also “Follow” when the cursor is kept on the icon.

This fascinating design can attract the user’s attention and force them to check your social network accounts. Let me give you the free source code on how to develop these cool icons you want.

The code is written following good coding practices since this makes the code efficient and easy to understand.

GitHub Source: Social Media Icons with Dual Tooltips

Features

  • Animation on Hover: The tooltips are dynamic and interesting because of the smooth and slick animation.
  • Responsive: All these icons are also responsive meaning that users with different device will have an equal experience.
  • Easy to Customize: Changing colours, sizes and tooltips is very simple to do in order to complement the design of the website.
  • Compatibility: Displays perfectly on all current devices and browsers, thus providing no restrictions for your audience.
  • Clean Code: Wonderful source of code as it is well organized and also has comments for the beginning learners.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<!-- 
======================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
======================================================
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Icons with Dual Tooltips</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
  <div class="social-icons">
    <p>@jvcodes</p>
    <a>SUBSCRIBE</a>
    <svg
      fill="#000000"
      xml:space="preserve"
      viewBox="0 0 461.001 461.001"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Layer_1"
      version="1.1"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <g>
          <path
            d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
            style="fill:#F61C0D;"
          ></path>
        </g>
      </g>
    </svg>
  </div>
  <div class="social-icons">
    <p>@jvcodes</p>
    <a>Follow</a>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      id="icons"
      viewBox="0 0 512 512"
      fill="#000000"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z"
        ></path>
      </g>
    </svg>
  </div>
  <div class="social-icons">
    <p>@javedcodes</p>
    <a>Follow</a>
    <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <g>
          <path
            fill-rule="nonzero"
            fill="#FF1493"
            d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
          ></path>
        </g>
      </g>
    </svg>
  </div>
</div>
</body>
</html>

CSS

Here is the complete code for style.css file to style the icons:

/*
=====================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
=====================================================
*/
body {
    background-color: #f0f8ff;
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100vh;
    background-color: #929292;
}
.card {
    display: flex;
    width: 220px;
    height: 50px;
    /* gap: 1.2rem; */
    background-color: whitesmoke;
    border-radius: 115px;
    padding-inline: 15px;
    position: relative;
    justify-content: space-around;
    /* align-items: center; */
  }
  
  .social-icons {
    cursor: pointer;
    display: flex;
    transition: all 0.5s;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
    font-weight: bold;
    font-size: small;
  }
  
  .social-icons > p {
    --var: -0%;
    position: absolute;
    top: var(--var);
    transition: all 0.7s;
    background-color: dodgerblue;
    border-radius: 7px;
    opacity: 0;
    padding-inline: 7px;
    padding-block: 3px;
    width: max-content;
  }
  .social-icons > p::after {
    content: "";
    position: absolute;
    border-top: 10px solid dodgerblue;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
  }
  .social-icons > a {
    --var: -0%;
    position: absolute;
    bottom: var(--var);
    width: max-content;
    transition: all 0.7s;
    opacity: 0;
    padding-inline: 7px;
    padding-block: 3px;
    background-color: crimson;
    border-radius: 7px;
  }
  .social-icons > a::after {
    content: "";
    position: absolute;
    border-bottom: 10px solid crimson;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%);
  }
  
  .social-icons:hover > a,
  .social-icons:hover > p {
    --var: -65%;
    opacity: 1;
  }
  
  .social-icons:hover {
    z-index: 15;
  }
  
  .card:hover > .social-icons:not(:hover) {
    filter: blur(3px);
    transform: scale(0.8);
  }
  
  .card svg {
    height: 30px;
  }

Download Source Code

You can download the source code of the social media icons with dual tooltips by using the button mentioned below. The code will be freely available under no copyright to allow you to implement it in your work or individual projects.

Download Source Code

Conclusion

The social media icons with dual tooltips are also very helpful for your website and give another option to showcase your accounts. This is free for use while crediting JV Source Codes by placing a link back to the initial source.

If you face any problem, you can write in the comments section below this article. I will respond immediately to help you. Additionally, remember to follow the channel named JV Source Codes for more such web designing tutorial videos and download links!

Download JV Source Codes

Similar Posts

In this blog post, I would like to give you a chance to download free source code of Simple Pricing Table with 3 Cards, made in HTML and CSS.
| | |

Simple Pricing Table with 3 Cards Using HTML and CSS (Free Source Code)

Do you need a simple and elegant pricing table that allows you to add it to your site easily? In this blog post, I would like to give you a chance to download free source code of Simple Pricing Table with 3 Cards, made in HTML and CSS. That is a clean and minimalist design,…

Google Drive Direct Download Link Generator
| |

Google Drive Direct Download Link Generator Tool in HTML, CSS, JavaScript (Free Source Code)

Do you want to make tool for direct downloading files from Google Drive with less time and effort? You will be glad to know that the Google Drive Direct Download Link Generator Tool in HTML, CSS, and JavaScript is ready for you. Here I am going to provide you free source codes of your own…

Top 10 Image Galleries
| | | |

Top 10 Image Galleries in HTML, CSS, JavaScript for Your Web Projects

Having an image gallery is a must when it comes to web design because the human brain is quite wired to understand pictures. HTML, CSS, and JavaScript are good technologies that help make great image galleries, appealing and adaptable. It doesn’t matter whether you’re designing a portfolio or a product catalog – these 10 image…

How to Create a Simple Sidebar Menu in HTML CSS JavaScript
| | |

Simple Sidebar Menu in HTML, CSS and JavaScript

Building a simple sidebar menu is an excellent idea that will allow adding valuable features and stunning looks to your website. A sidebar menu is useful for clients to find their way to different items without feeling that they are being given too many choices, thus, creating simplicity and order. Today, I’m going to share…

A responsive hero section with content right is an element that makes your site’s design unique and attracts users’ attention.
| |

Responsive Hero Section with Content Right Using HTML and CSS

A responsive hero section with content right is an element that makes your site’s design unique and attracts users’ attention. This layout positions your content well on the right and leaves the page looking neat and balanced. This hero section will come in handy when creating anything from simple, personal blog, and portfolio websites to…

Leave a Reply

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