Adding jquery tooltips to your wordpress theme

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="" 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="" title=" - 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 id=”8″]