Create headers with Divi MadMenu 

How to Display Network Names as Tooltips for Divi Footer Social Icons

by | Jun 14, 2016 | 6 comments

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:

Displaying social network name as tooltip on hover
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.

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Pin It on Pinterest

Shares
Share This