project preview
Folder Structure:
- First we will need to create our project folder. Whatever name you want to give it.
- Then we will create files index.html and style.css to begin our project code.
- At last we will link css file with our html file.
Introduction:
In this project, we will create a stylish social media icons with tooltip on hover using Html and CSS. The design will feature various social media icons, each within a circular container, with a smooth hover effect that fills the icon’s background with the brand color. Additionally, tooltips will display the name of the social media platform when hovering over an icon, providing a visually appealing and interactive user experience.
HTML Code:
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Icons with Tooltip on Hover</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<ul class="icon_list">
<li class="icon_content">
<span data-social="facebook">
<div class="filled"></div>
<a href="">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</span>
<div class="tooltip">Facebook</div>
</li>
<li class="icon_content">
<span data-social="whatsapp">
<div class="filled"></div>
<a href="">
<ion-icon name="logo-whatsapp"></ion-icon>
</a>
</span>
<div class="tooltip">WhatsApp</div>
</li>
<li class="icon_content">
<span data-social="pinterest">
<div class="filled"></div>
<a href="">
<ion-icon name="logo-pinterest"></ion-icon>
</a>
</span>
<div class="tooltip">Pinterest</div>
</li>
<li class="icon_content">
<span data-social="github">
<div class="filled"></div>
<a href="">
<ion-icon name="logo-github"></ion-icon>
</a>
</span>
<div class="tooltip">Github</div>
</li>
<li class="icon_content">
<span data-social="instagram">
<div class="filled"></div>
<a href="">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</span>
<div class="tooltip">Instagram</div>
</li>
</ul>
</div>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>
..
Explanation:
We link an external CSS file (style.css) for styling. In the <body>, we have a <div> with a class of “wrapper” that acts as a container for our icon list. This container holds an unordered list (<ul>) with the class “icon_list”, and each list item (<li>) represents a different social media icon.
Each icon is wrapped inside a <span> with a data-social attribute to apply specific styling and functionality. Inside the <span>, there’s a <div> with the class “filled” that will be used to create a dynamic background effect on hover.
Each icon is represented using the <a> tag, which links to the respective social media page (currently left blank with href="") and includes an <ion-icon> tag to display the social media icon from the Ionicons library.
Additionally, each <li> has a <div> with the class “tooltip” that contains the name of the social media platform, which will be shown on hover.
At the end of the body, two <script> tags are included to load the Ionicons library, one for modern browsers using ES modules (type="module") and one fallback for older browsers. This setup allows for consistent icon rendering across different browsers. The HTML is structured to be simple yet effective, enabling smooth animations and a clean design, suitable for both beginners and advanced developers.
CSS Code:
...
/* Global Reset */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Body Styling */
html,
body {
display: grid;
height: 100%;
place-items: center;
background: #ecf0f1;
}
/* Wrapper Styling */
.wrapper {
width: 360px;
height: 70px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15),
-5px -5px 15px rgba(0, 0, 0, 0.15);
}
/* List Reset */
ul {
list-style: none;
}
/* Icon List Styling */
.icon_list {
display: flex;
justify-content: center;
align-items: center;
}
/* Individual Icon Content */
.icon_list .icon_content {
margin: 0 10px;
position: relative;
}
/* Tooltip Styling */
.icon_list .icon_content .tooltip {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
color: #fff;
padding: 6px 10px;
border-radius: 5px;
font-size: 14px;
transition: all 0.3s ease;
visibility: hidden;
opacity: 0;
}
.icon_list .icon_content:hover .tooltip {
opacity: 1;
visibility: visible;
top: -50px;
}
/* Icon Container Styling */
.icon_list .icon_content span {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
.icon_list .icon_content span:hover {
box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
/* Icon Styling */
.icon_list .icon_content span a {
position: relative;
z-index: 1;
font-size: 28px;
text-decoration: none;
display: flex;
align-items: center;
color: #4d4d4d;
}
.icon_list .icon_content span:hover a {
color: #fff;
}
/* Filled Background for Icons */
.icon_list .icon_content span .filled {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: #000;
transition: all 0.3s ease-in-out;
}
.icon_list .icon_content span:hover .filled {
height: 100%;
}
/* Social Media Specific Colors */
.icon_list .icon_content span[data-social="facebook"] .filled,
.icon_list .icon_content span[data-social="facebook"]~.tooltip {
background-color: #006ce8;
}
.icon_list .icon_content span[data-social="whatsapp"] .filled,
.icon_list .icon_content span[data-social="whatsapp"]~.tooltip {
background-color: #1db954;
}
.icon_list .icon_content span[data-social="pinterest"] .filled,
.icon_list .icon_content span[data-social="pinterest"]~.tooltip {
background-color: #bd081c;
}
.icon_list .icon_content span[data-social="github"] .filled,
.icon_list .icon_content span[data-social="github"]~.tooltip {
background-color: #000;
}
.icon_list .icon_content span[data-social="instagram"] .filled,
.icon_list .icon_content span[data-social="instagram"]~.tooltip {
background: linear-gradient(#f9ce34, #ee2a7b, #6228d7);
}
/* Responsive Styles */
/* Tablet styles - reduce by 30% */
@media (max-width: 1024px) and (min-width: 768px) {
.wrapper {
width: 252px;
height: 49px;
}
.icon_list .icon_content {
margin: 0 7px;
}
.icon_list .icon_content .tooltip {
font-size: 10px;
padding: 4px 7px;
top: -20px;
}
.icon_list .icon_content span {
width: 35px;
height: 35px;
}
.icon_list .icon_content span a {
font-size: 20px;
}
}
/* Mobile styles - reduce by 50% */
@media (max-width: 767px) {
.wrapper {
width: 180px;
height: 35px;
}
.icon_list .icon_content {
margin: 0 5px;
}
.icon_list .icon_content .tooltip {
font-size: 8px;
padding: 3px 5px;
top: -5px;
}
.icon_list .icon_content span {
width: 25px;
height: 25px;
}
.icon_list .icon_content span a {
font-size: 14px;
}
}
...
Explanation:
The CSS code in this project is designed to style the social media icon set with hover effects and tooltips.
We start with a global reset using the `*` selector to remove default padding and margin, and set `box-sizing: border-box` to include padding and borders in element widths, which helps in consistent sizing across elements.
The `html` and `body` are styled to use a grid display to center the content both vertically and horizontally, with a light background color (`#ecf0f1`).
The `.wrapper` class styles the main container holding the icons, giving it a fixed width and height, a white background, rounded corners, and a subtle shadow effect to make it appear raised from the background. This container uses `flexbox` to align the icons at the center.
For the icon list, we remove default list styling using `list-style: none` and use `flexbox` again to center the items inside. Each `.icon_content` class styles the individual list items, positioning them relatively so that the tooltips and hover effects can be positioned absolutely relative to the icon.
The `.tooltip` class is initially hidden (`visibility: hidden` and `opacity: 0`) and positioned above the icon, but it becomes visible when the user hovers over the icon’s container, thanks to the `:hover` pseudo-class. Smooth transitions are added to both the tooltip visibility and the icon background changes for a more fluid user experience.
Each icon’s container (`span`) is styled with a circular shape using `border-radius: 50%` and centered content using `flexbox`. On hover, a shadow effect is added to give a dynamic look.
The `.filled` class is initially hidden with zero height and then expands to cover the icon’s background color on hover, creating a smooth fill effect. The CSS uses specific styles for each social media platform by targeting the `data-social` attribute to give each icon its unique color scheme.
Finally, the CSS includes media queries to adjust the size and spacing of icons and tooltips for different screen sizes, ensuring that the design remains responsive and visually appealing on all devices.
Source Code:
Download “Social-Icons-Tooltip.zip” Social-Icons-Tooltip.zip – Downloaded 1 time – 1.48 KB
Conclusions:
In this project, we created a stylish and responsive set of social media icons with hover tooltips using HTML and CSS. The HTML provided the structure for displaying icons and tooltips, while the CSS added visual appeal through dynamic hover effects and custom colors for each social media platform. We utilized Flexbox for alignment and responsive design techniques to ensure the icons look great on various devices. Additionally, we implemented smooth transitions to enhance the user experience. Overall, this project showcases how to combine HTML and CSS effectively to create an interactive and visually attractive component for websites.
