I have put the social media icons in my footer as a "follow me" section. Now I would like to have a tooltip like this here https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom where each one would pop up with a text "facebook", "Twitter", etc.
How do I achieve this with what I already have since I don't want to mess up my footer and my social media icons while attempting this. Is there a way to squeeze the <span class="tooltiptext">
in? Or use this as an id tag? I was thinking of trying something like this for example.
<a href="#" class="fa fa-facebook" id="tooltiptext"></a>
Is this possible?
Any tips and tricks would be much appreciated. Feel free to run the code snippet to see what my social media icons look like at the moment.
/* Footer aka a copyright + social media pages */
.footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
/* Height of the footer */
background-color: #b3b3ff;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the tooltip */
}
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-snapchat {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer">
<div class="tooltip">
<!-- Now where should I place "tooltiptext" -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-snapchat"></a>
</div>
</div>