Ben posted in StudioPress forum:
I’m trying to get a custom tooltip to work on hover of the Facebook Simple Social Icons within the footer widget area.
He tried using Zebra_Tooltips jQuery plugin for this.
In this article I provide the steps to add tooltips to icons in a Simple Social Icons widget using Zebra_Tooltips jQuery script.
Screenshot:
Screencast:
Step 1
Save this file as zebra_tooltips.js and upload it to /js directory under active child theme.
Step 2
Download zebra_tooltips.css from here and upload it to /css directory under active child theme.
Step 3
Install and activate Simple Social Icons. At Appearance > Widgets, drag its widget into a widget area (sidebar) of your choice and enter the URL(s) for which you wish to display the social icons.
Step 4
Create a file named zebra_tooltips_init.js having the following code and upload it to /js directory under active child theme:
Great work on this post Sridhar. Never been a fan of these tooltips, but this looks clean and elegant. Thanks for the post.
Love this tip, thanks for sharing! Super simple implementation, works great, and very easy to visually customize or adapt to different apllications. I’ve modified the init twice already myself — once on a client’s website for some custom podcasting icons, and again on my own website.
Thanks for this excellent tutorial Sridhar! I just got it working on a WP menu by adding the class like this:
$( ".sidebar .lf-sidebar-menu li.menu-item-1711 a" ).addClass( "tooltip" );Keep the tuts coming! oh and maybe it’s time for you to have a suggest a tutorial feature on your site…