- This topic has 3 replies, 2 voices, and was last updated 9 years, 9 months ago by
.
-
Posts
-
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:
http://thekennedybook.com/marketingdev/
<link rel="stylesheet" href="/zebra_tooltips.css" type="text/css">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.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.