Today I was working on my site’s footer design and thought that it would look nice if social network names of the footer social icons were displayed as tooltips on hover. To implement this feature I was looking for a solution which would not require using additional HTML and jQuery but CSS only. And it turned out that it is possible and actually quite easy to do.
This is how it looks:
You can also scroll down to the footer and check out its live version.
Let me show you how simple the implementation is.
The HTML of Divi footer social icons container is this:
<!-- START -->
<ul class="et-social-icons">
<li class="et-social-icon et-social-facebook">
<a href="#" class="icon">
<span>Facebook</span>
</a>
</li>
</ul>
<!-- END -->As you can see, there is a span tag inside the a tag containing the name of network. This is what we are going to display as a tooltip. All we need is this: .et-social-icon and the span tag, and here is the CSS code I used for displaying the content of span tag on hover:
/*-- START --*/
#footer-bottom .et-social-icon span {
position: absolute;
display: none;
}
#footer-bottom .et-social-icon:hover span {
display: block;
z-index: 9999;
}
/*-- END --*/Simple, right? But it looks a bit ugly. Let’s apply some styling to it:
/*-- START --*/
#footer-bottom .icon {
display:block;
}
#footer-bottom .et-social-icon span {
position: absolute;
top: -30px;
left: -10px;
display: none;
width: 64px;
height: auto;
font-family: "Source Sans Pro", Lato, sans-serif;
font-size: 12px;
line-height: 17px;
color: #ffffff;
padding: 3px 0px;
background-color: #72849C;
border: 1px solid #ccc;
box-shadow: 0 0 3px rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
border-radius: 3px;
-webkit-border-radius: 3px;
}
#footer-bottom .et-social-icon:hover span {
display: block;
z-index: 9999;
}
/*-- END --*/Add this CSS into your child theme style.css file or into the Divi -> Theme Options -> Custom CSS field. The styling is optional, you can apply any styling that matches your site design.
That’s all, I hope you enjoyed this quick tutorial. Feel free to leave your thoughts and suggestions in the comments section below.
Nice tutorial. It would extra nice to see a css tail on the tooltips.
Yes, child theme – style.css
/*
Theme Name: New Theme Name
Description: Custom WordPress Child Theme for Divi.
Author: Your Name
Template: Divi
Version: 1.0.1
/*
@import url(“../Divi/style.css”);
/* = Child Theme Customization Starts Here
——————————————————- */
#footer-bottom .icon {
display:block !important;
}
#footer-bottom .et-social-icon span {
position: absolute !important;
top: -30px !important;
left: -10px !important;;
display: none !important;
width: 64px !important;
height: auto !important;
font-family: “Source Sans Pro”, Lato, sans-serif !important;
font-size: 12px !important;
line-height: 17px !important;
color: #ffffff !important;
padding: 3px 0px !important;
background-color: #72849C !important;
border: 1px solid #ccc !important;
box-shadow: 0 0 3px rgba(0,0,0,.3) !important;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.3) !important;
border-radius: 3px !important;
-webkit-border-radius: 3px !important;
}
#footer-bottom .et-social-icon:hover span {
display: block !important;
z-index: 9999 !important;
}
And I do not have a square social icons. I mean this effect – creativemarket.com/DeepDesign/56592-Nice-Square-Social-Icons/screenshots/#screenshot1
What do I do to get this effect?
Thank you for your reply.
Hello.
I have a problem. I typed in WordPress – Editor – (style.css) / * Bottom Bar * /
# Footer-bottom {. But did not center the icon. What am I doing wrong ?
Thank you in advance. Regards.
Hello Lukas.
Could you please provide more details so that I can help you? You need to copy and paste the css code into your child theme style.css or in the Custom CSS field on Theme Options page. Have you done that?
Brilliant! Thank you!
You’re welcome deb! ;)