How to Include jQuery Tools Tooltips in WordPress Theme

I was stumped for a good deal of time tonight on an implementation of the jQuery Tools Tooltips script in a custom WordPress theme I am building.

I was able to get all of the scripts echoing out on the page, but the javaScript was not running at all.

It turns out the issue was in the way I was including the javaScript. I was attempting to include it longhand via functions.php. It turns out that functions.php cannot process javaScript like that. Instead, I needed to enqueue the script as follows:

		function add_jquery_tools() {
	if ( !is_admin() ) {
		wp_register_script('addons_script', 'http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js', array('jquery'), '');
		wp_enqueue_script('addons_script');
	}
	if ( !is_admin() ) {
		wp_register_script('addons_javascript', get_bloginfo('url').'/wp-content/themes/mytheme/tooltips.js', false, '');
		wp_enqueue_script('addons_javascript');
	}
}    
add_action('wp_print_scripts', 'add_jquery_tools');

Note that ‘wp_print_scripts’ needs to be used rather than ‘init’. This is due to the fact that when ‘init’ runs, WordPress does not yet know what page we are on.

After adding the above script to functions.php, create a file called “tooltips.js” in the theme root and add the following code to that file:

jQuery(document).ready(function($) {
	// $() will work as an alias for jQuery() inside of this function
	$("div[title]").tooltip({
	   // tweak the position
	   offset: [80, 0],
	
	   // use the "slide" effect
	   effect: 'slide',
	   
	   delay: 200,
	   
	   relative: false,
	   
	   position: 'top center'
	
	// add dynamic plugin with optional configuration for bottom edge
	});
});

Note that the tooltips.js code will vary based on your desired tooltip design.