• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Simple Social Icons Plugin, jQuery issue

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Simple Social Icons Plugin, jQuery issue

This topic is: resolved

Tagged: jquery, simple social icons

  • This topic has 3 replies, 2 voices, and was last updated 9 years, 3 months ago by Ben Siegfried.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 25, 2013 at 2:22 pm #75561
    Ben Siegfried
    Member

    I'm trying to get a custom tooltip to work on hover of the Facebook Simple Social Icons within the footer widget area. It seems pretty straightforward, I've added jQuery before.

    I've tried both enqueueing the jQuery and adding it to the <head> and <footer> in the Theme settings and can't get it to work.

    I'm wondering if not getting it to work has to do with the location of the simple-social-icons.php file?
    Here's what I added to that file and only to the first Facebook icon:
    'facebook' => array(
    'label' => __( 'Facebook URI', 'ssiw' ),
    'pattern' => '<li class="social-facebook">',
    ),

    Here's the jQuery from /js/tooltip.js:

     jQuery(document).ready(function($) {
        new $.Zebra_Tooltips($('.tooltips'));
    });

    The jQuery plugin in the /js directory is zebra_tooltips.js

    I've enqueued the jQuery in the functions.php file this way:

    // Enqueue Social Facebook's Tooltip
    add_action( 'wp_enqueue_scripts', 'socialfacebook_enqueue_script' );
    function socialfacebook_enqueue_script() {
        wp_enqueue_script( 'follow', get_stylesheet_directory_uri() . '/js/tooltip.js', array( 'jquery' ), '', true );
    }

    And I have added the CSS for zebra_tooltips in the Theme settings <head> like this:
    <link rel="stylesheet" href="/zebra_tooltips.css" type="text/css">

    http://thekennedybook.com/marketingdev/
    December 8, 2013 at 8:23 am #77684
    Sridhar Katakam
    Participant

    Here you go: http://sridharkatakam.com/add-tooltips-simple-social-icons/


    Genesis Tutorials | Follow me on Twitter

    December 8, 2013 at 8:44 am #77685
    Ben Siegfried
    Member

    Sridhar,

    You are so freakin' cool! Thanks!

    Ben

    December 10, 2013 at 12:06 pm #78087
    Ben Siegfried
    Member

    With Sridhars help I was able to get the jQuery working. What his solution will do is provide a tooltip for every simple social icon. What I needed was to be able to select which icons needed a tooltip. Since we have three Facebook pages we needed to distinguish between them from all three having the same icon. So the following solution below provided for that.

    First, in the simple-social-icons.php file of the plugin we added extra Facebook icons with a class .facebook and a title="yourtitle" in the "a" tag.

    
    
    'facebook' => array(
    				'label'   => __( 'Facebook URI', 'ssiw' ),
    				'pattern' => '<li class="social-facebook1"><a title="yourtitle-1" href="%s"></a></li>',
    			),
    			'facebook1' => array(
    				'label'   => __( 'Facebook URI', 'ssiw' ),
    				'pattern' => '<li class="social-facebook2"><a title="yourtitle-2" href="%s"></a></li>',
    			),
    			'facebook2' => array(
    				'label'   => __( 'Facebook URI', 'ssiw' ),
    				'pattern' => '<li class="social-facebook3"><a title="yourtitle-3" href="%s"></a></li>',
    			),
    
    

    Next, we reduced the jQuery in the zebra_tooltips_init.js file to this:

    
    
    jQuery(document).ready(function($) {
    
    	new $.Zebra_Tooltips($('.facebook'), {
    	  'position': 'left',
    	  'animation_offset': 10,
    	  'max_width': 350
    
    	});
    });
    
    

    Just follow Sridhar's instructions if you want all of your icons to have a tooltip or mine if you want only select icons, or you could do all of them with my method which, but you'd have to be aware that if simple-social-icons get updated that it may change it's .php file and then you'd have to go in and update that.

    The reference website for my method will be for http://coronadomarketing.com beginning mid-December 2013 when it launches, until then it's the one a few comments back.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble