Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #182814

    I know this is not currently a feature in Enfold (per the original thread here : (Purchase code hidden if logged out) / ) but I need to add it anyway for a client :) So could you point me in the right direction of what file to edit, or perhaps a plugin? Thank you.


    Hey Michae1!

    You would need to edit this file: /enfold/includes/helper-social-media.php, play with the html() function declared in line 84.

    Put the text string you want and then make a behavior part with CSS.

    Best regards,



    Thank you for pointing me in the right direction. I only have minimal PHP experience. If you could guide me a little, I promise to spend as many hours as needed sifting through the PHP manual for a more complete understanding :)

    As I see it, it seems like I would need to inject a variable for the hover text either between lines 94/95 or 99/100. Then either designate the strings for the actual text in the CSS, or add a parameter for the text in /enfold/css/layout.css ?

    Would there be other files (besides the custom styles.css) that I would need to edit, or just this function? Trying to jump from the kiddie pool to the lake (or possibly ocean) as it were, so any help (flotation devices) you might have for me would be greatly appreciated. Thank you!

    – Michael


    Hi Michael!

    I think you’d need to add the string here actually (inside build_icon):

    What are the strings you want to add? are they the same? how many icons do you have?

    Best regards,


    Hi Josue,

    Thank you for your help. There are only 4 icons, each string would be different – all the icons are obvious (facebook, twitter, pinterest) except the one we use for their “Blog” (an open book) I’d probably just use the names as hover text, or possibly a short call to action like “Friend us on Facebook” or something like that.

    So, I see this is the function that’s dynamically building out the link. Would the best way to accomplish what I’m trying to do, be a switch case or if/else statement here? What would I set to determine the hover text then, alt or title attribute? Or should I provide/pass another argument for the alt/title/hover text in the functions.php?

    This is where I get confused. What to put where to best accomplish the task of hover text.

    If you could post an example of the format, that would greatly appreciated. Thank you!

    BTW, do you use Sublime Text 2 too? I love that IDE :)



    You could make it static, using this variable: $this->counter, which holds the number of the icon, with that you can make a conditional like this:

    switch ($this->counter) {
        case 1:
            $string = "first_string";
        case 2:
            $string = "second_string";
        case 3:
            $string = "third_string";
        case 4:
            $string = "forth_string";
    $html .= "<span>$string</span>";



    Hi Josue,

    Thank you for all your help and the example. I think I’m getting closer. Still having a little difficulty determining next step though. I’ve placed the above example code on line 75 just before the “return $html;” line. Is that where it should be? Because the affect was just that it added static text of each of the strings below the Social Icons. Nothing on hover though.

    My next thought was that I just need to assign a class to the $string span and set it to display:none or hidden; then style it as desired and set the a:hover to visible. But I feel like I’m missing a key step where $string is assigned to a “title” or “alt” tag?

    Thank you again for your help.



    Can you post the link to the website you are working please?



    It’s posted above, but here it is again


    It looks like you didn’t add the ‘switch’ code, here’s how it look on my end with that code applied:



    I added it, but then deleted it because it was not functioning as “hover / mouse over” text. The text appeared, but just under the icons. What I want to do is have it appear like a tooltip. What would I need to do to accomplish that?



    That’s the structural part, the behavior would need to be done with CSS, with something like this:

    /* This hides it by default */
    .social_bookmarks span {
        display: none;
        position: absolute;
        top: 30px;
    /* This show them on :hover */
    .social_bookmarks li:hover span{
        display: block;


Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Social Icons : Set Hover Text’ is closed to new replies.