How to Display Network Names as Tooltips for Divi Footer Social Icons
This is how it looks:
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 -->
/*-- START --*/ #footer-bottom .et-social-icon span { position: absolute; display: none; } #footer-bottom .et-social-icon:hover span { display: block; z-index: 9999; } /*-- END --*/
/*-- 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 --*/
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 – https://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! ;)