In this tutorial we will see how to create a Social Media Menu with Popup Tooltip using HTML and CSS. This menu has on hover popup animation for the tooltip.
Table of Contents
HTML Code
Take a look at the HTML code given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Popup Menu</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="menu">
<li class="item facebook">
<span class="tooltip tooltip-fb">Facebook</span>
<i class="fa fa-facebook"></i>
</li>
<li class="item youtube">
<span class="tooltip tooltip-yt">Youtube</span>
<i class="fa fa-youtube"></i>
</li>
<li class="item instagram">
<span class="tooltip tooltip-ig">Instagram</span>
<i class="fa fa-instagram"></i>
</li>
<li class="item twitter">
<span class="tooltip tooltip-tw">Twitter</span>
<i class="fa fa-twitter"></i>
</li>
</ul>
</body>
</html>
CSS Code
CSS code is given below.
<style>
*{
margin: 0;
padding: 0;
}
html,
body {
display: grid;
height: 100%;
width: 100%;
font-family: monospace;
place-items: center;
background: #CBE9F7;
}
.menu {
display: inline-flex;
list-style: none;
}
.menu .item {
position: relative;
background: #FFF;
border-radius: 50%;
padding: 15px;
margin: 10px;
width: 35px;
height: 35px;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 5px 0px #999;
cursor: pointer;
transition: all 0.3s ease;
}
.menu .tooltip {
position: absolute;
color:#fff;
font-weight: bold;
top: 0;
font-size: 14px;
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px #333;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
}
.menu .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s ease;
}
.menu .item:hover .tooltip {
top: -40px;
opacity: 1;
}
.tooltip-fb,.tooltip-fb::before
{
background: #1877F2;
}
.tooltip-tw,.tooltip-tw::before
{
background: #1DA1F2;
}
.tooltip-ig,.tooltip-ig::before
{
background:#DB469A;
}
.tooltip-yt,.tooltip-yt::before
{
background: #F00;
}
</style>
Video Tutorial
Watch our video tutorial on How To Create Social Media Menu with Popup Tooltip using HTML and CSS.