To use a jquery plugin within your wordpress site you need to load jquery manually along with the jquery script files. In this step by step tutorial i will explain you how to add a simple jquery tooltip plugin to your site.
First thing to do is; uploading plugin script in your theme folder. You may put it in a directory named js or something like that to keep things tidy. After putting files in place you need the magic word to load a javascript file in your theme: wp_enqueue_script. This function adds your file in queue and wordpress use it when the time comes. Here is how to add our file in to queue:
function enqueue_scripts(){
wp_enqueue_script('jquery'); // load jquery with theme
wp_enqueue_script('tooltip', get_stylesheet_directory_uri() . '/js/ez-tooltip.js');
} add_action('init', 'enqueue_scripts');
This code will run when init is called and it will add both jquery and our tooltip script to site’s <head> part.
Jquery Tooltip plugin will display title values from images and links with a css class tooltip. Here is a link sample:
<a href="http://shailan.com" title="This will be displayed as tooltip" class="tooltip">Hover link to see tooltip</a>
Also you can use image titles for tooltips (Eg. for post titles):
<img src="http://shailan.com/shailan_logo.png" title="Shailan.com - Where your heart is blah blah" width="90" height="90" />
Using this simple structure you can add tooltips to any image or link on your site.
By default script uses tooltip id to style the tooltip element. Here is a sample css for your styling:
#tooltip{ display:none; position:absolute; z-index:1000; background-color:#ffd; color:#444; padding:4px; box-shadow:#333 1px 1px 3px; }
Please note that wordpress loads jquery with no-conflict mode. This means many jquery code you can find on web won’t work. To make them work you need to replace $ signs with jQuery.
You can download the tooltip script here: Download ez-tooltips.js
Hi Metin! Thanks for sharing.
Maybe I’m doing something wrong and the tooltip box is showing up empty, no text whatsoever. And the original link title is still appearing outside of it. Can you shine a light on this issue?
Thanks once again! Cheers.
Did you add the CSS code to your theme stylesheet?
That may be the problem.
Yes I did. Somehow I found out that the solution was to change the class in the js file options. Although I added the class to the menu (my target in this case) it didn’t work. But now it is.. like a charm :) Thanks Metin!!
Hi Metin,
On following this ..I manage to get a cream box showing as the toolip..so it is loading ..but the box is empty and the test is in a browser tooltip… the script says it is ideal for WordPress.. I am using it as a menu item tooltip..is that not possible?? How can I get the title text to appear in the box?? ..thank you
Hey Michael, This script works with wordpress sites only. If you send me a link to your site, i can check it. I am using the same script on my sidebar tabs.
Can you show me the ez-tooltip.js ? i can’t see and download it :(
I’m would like to download a copy of the ez-tooltip.js file but can’t find it on this page, perhaps you could point me in the right direction?
Thanks
I moved servers to mediatemple. That’s why some downloads got lost. I re uploaded the script now. Thanks.