Simple Social Icons Plugin, jQuery issue

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

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  benjeeno 7 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #75561

    benjeeno
    Participant
    Post count: 248

    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">

    • This topic was modified 8 months, 1 week ago by  benjeeno. Reason: hmmm, the php from simple social icons isn't all showing up in the post
    • This topic was modified 8 months, 1 week ago by  benjeeno.
    • This topic was modified 8 months, 1 week ago by  benjeeno.
    • This topic was modified 8 months, 1 week ago by  benjeeno. Reason: hmmm, the php from simple social icons isn't all showing up in the post
    • This topic was modified 8 months, 1 week ago by  benjeeno.
    • This topic was modified 8 months, 1 week ago by  benjeeno.
    http://thekennedybook.com/marketingdev/
    #77684

    Sridhar Katakam
    Participant
    Post count: 926
    #77685

    benjeeno
    Participant
    Post count: 248

    Sridhar,

    You are so freakin’ cool! Thanks!

    Ben

    #78087

    benjeeno
    Participant
    Post count: 248

    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.

    • This reply was modified 7 months, 3 weeks ago by  benjeeno.
    • This reply was modified 7 months, 3 weeks ago by  benjeeno.
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.