Recently I saw the Social Grid plugin in action on my friend Anthony’s website. I loved how it performed and wanted to add it to my site but I really hate using plugins as it slows down a website. I decided to take some time and research how to make it happen without a plugin. This is why I love the The Thesis theme. Here is what I did to make it work
First I looked for the quickest Jquery tooltip script around. I found Tipsy from Jason Frame. Tipsy is used by many big websites like Twitter. It is fast and works great.
At first I tried just to copy and paste the sample code and it didn’t work right but after a quick tweet to Jason he was willing to give me a helping hand. He found the problem and told me how to fix it. Now it works and I’m sharing it with you!
First and foremost. Download the Tipsy script and files. Then add the following to your Thesis custom.css file
BACK UP YOUR FILES BEFORE MAKING CHANGES
The CSS
Make sure you change the tipsy.gif link to your location. Then put the following code into a widget.
note: At first I was using custom_functions.php to create a custom widget but it actually worked by pasting the social code directly into a blank Text widget
Make sure you change all the links to your images and sites. So there you have it. It should work for you but if it doesn’t I don’t know why. I’m not great at this stuff but I can sometimes get coding to work thanks to the Thesis community.
Special Thanks to Jason Frame for the quick help on getting it to work right on my site!
About Scott Wyden Kivowitz
Nice. You could also do this with CSS and a simple list of image links. It might not be as fancy, but it would still look pretty good and using opacity filters you could achieve the same hover effect. Also, it would save you loading another script. That said, yours is pretty slick.
I'd love to make it happen with CSS but i'm not good at that. You should totally write a tutorial on it :-)Thanks for the comment Adam!
Sweet. This is exactly what I've been looking for. I'm interested in tipsy itself rather that the social media box. So my question is: I'd like this to work as my "default" tooltip on my site (site-wide). In other words, I'd like to apply tipsy to all my links and have the tooltip grab its info from my "title" tags, which I believe is its default behavior anyway. How do I do that? I'm running Thesis 1.7. Thanks.
I would suggest visiting the Thesis forum for that. I have to seek help from them to figure things out myself.
Will do. :)
Awesome, let me know how it goes :-)
Hello Scott, where did you get the icons?
My icons are from Rogie at http://www.komodomedia.com/download/#social-net…..
Hello Scott, where did you get the icons?
My icons are from Rogie at http://www.komodomedia.com/download/#social-net…