Hey Friends! Today we are learn how to make Social Media tooltip icons using Html and CSS. So i hope you like it. Here you can get my all videos source code this source code just phaste in your code editor and save it filename.html. In this article, we will tell you how to make tooltip icons using HTML, CSS. If you like this article of ours, then click on the video given below to watch the video related to this article and also subscribe to our channel.
So let’s know how to make Neumorphism Registration Form.
If you want to make easily then read the following steps for make this..
- Open your code editor software and select the new file and give the file name like filename.html and save it then press shift+1 for automatically get the html syntax.
- After this give the div tag and make class for designing class .wrapper.
- Facebook Icon
Give the one more div tag and give the two class and class name is icon and facebook then all classes give the name as a requirement. After this make a one more div and give the class and class name is tooltip icons and set the text content like Facebook for interaction the give the span tag and in the span tag put the icon like a faceook icon link IONICONS.
- Twitter Icon
Give the one more div tag and give the two class and class name is icon and facebook then all classes give the name as a requirement. After this make a one more div and give the class and class name is tooltip and set the text content like Facebook for interaction the give the span tag and in the span tag put the icon like a faceook icon link IONICONS.
- Instagram Icon
Give the one more div tag and give the two class and class name is icon and facebook then all classes give the name as a requirement. After this make a one more div and give the class and class name is tooltip and set the text content like Facebook for interaction the give the span tag and in the span tag put the icon like a faceook icon link IONICONS.
- WhatsApp Icon
Give the one more div tag and give the two class and class name is icon and facebook then all classes give the name as a requirement. After this make a one more div and give the class and class name is tooltip and set the text content like Facebook for interaction the give the span tag and in the span tag put the icon like a faceook icon link IONICONS.
- YouTube Icon
Give the one more div tag and give the two class and class name is icon and facebook then all classes give the name as a requirement. After this make a one more div and give the class and class name is tooltip and set the text content like Facebook for interaction the give the span tag and in the span tag put the icon like a faceook icon link IONICONS.
Use the CSS for styling.
If you want to make css internal or extrnal we are used css internal in the head sectionyou can use easily in the head section with internal css. Now first get the font style and we are used font here Fonts.Google fonts name is Poppins with sans sarif. A material design tooltip. Tooltips provide text labels which help explain the function of a button or other user interface action. Wrap the button in a Tooltip widget and provide a message which will be shown when the widget is long pressed. Many widgets, such as IconButton, FloatingActionButton, and PopupMenuButton have a tooltip property that, when non-null, causes the widget to include a tooltip icons in its build.
Tooltips improve the accessibility of visual widgets by proving a textual representation of the widget, which, for example, can be vocalized by a screen reader.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Tooltip Icons</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins:wght@200&family=Righteous&family=Russo+One&family=Ubuntu+Mono&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(315deg, #ffffff, #d7e1ec);
}
.wrapper{
display: flex;
}
.wrapper .icon{
margin: 0 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
z-index: 2;
cursor: pointer;
}
.wrapper .icon span{
width: 60px;
height: 60px;
display: block;
background: #fff;
text-align: center;
border-radius: 50%;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}
.wrapper .icon span ion-icon{
font-size: 25px;
margin-top: 17px;
}
.wrapper .icon:hover span ion-icon{
color: #fff;
}
.wrapper .icon .tooltip{
position: absolute;
top: 0;
background-color: #fff;
color: #fff;
font-size: 20px;
padding: 10px 18px;
border-radius: 25px;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
opacity: 0;
pointer-events: none;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip{
position: absolute;
top: -70px;
opacity: 1;
pointer-events: auto;
}
.wrapper .icon .tooltip::before{
position: absolute;
content: '';
width: 15px;
height: 15px;
background: #fff;
bottom: -8px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.facebook ion-icon{
color: #3B5999;
}
.twitter ion-icon{
color: #45c1f6;
}
.instagram ion-icon{
color: #e1306c;
}
.whatsapp ion-icon{
color: rgb(32,173,32);
}
.youtube ion-icon{
color: #de463b;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
text-shadow: 0 -1px 0px rgba(0,0,0,0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before{
background: #3B5999;
}
.wrapper .twitter:hover span,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before{
background: #45c1f6;
}
.wrapper .instagram:hover span,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before{
background: #e1306c;
}
.wrapper .whatsapp:hover span,
.wrapper .whatsapp:hover .tooltip,
.wrapper .whatsapp:hover .tooltip::before{
background: rgb(32,173,32);
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before{
background: #de463b;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="icon facebook">
<div class="tooltip">Facebook</div>
<span><ion-icon name="logo-facebook"></ion-icon></span>
</div>
<div class="icon twitter">
<div class="tooltip">Twitter</div>
<span><ion-icon name="logo-twitter"></ion-icon></span>
</div>
<div class="icon instagram">
<div class="tooltip">Instagram</div>
<span><ion-icon name="logo-instagram"></ion-icon></span>
</div>
<div class="icon whatsapp">
<div class="tooltip">WhatsApp</div>
<span><ion-icon name="logo-whatsapp"></ion-icon></span>
</div>
<div class="icon youtube">
<div class="tooltip">YouTube</div>
<span><ion-icon name="logo-youtube"></ion-icon></span>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>Popular Article.
How to create footer using html, css?
How to make neumorphism clock using html ,css and javascript?
How to make tea cup with bapour using html, css only?
How to design glass card employee list using html, css?
How to design Avtar with animation using html, css?
How to make user profile like a instagram using html, css?
Watch video related this article…
