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.

Posted in

The Mighty Mo! Design Co.

3 Comments

  1. David Radovanovic on March 24, 2011 at 1:24 pm

    Thanks for sharing. Now I need to change the $(“div[title]”).tooltip({

    to trigger when an img tag is fouund:

    $(“img[title]”).tooltip({



  2. David Radovanovic on March 24, 2011 at 1:26 pm

    Seems to not work in FireFox?



  3. toby on March 25, 2011 at 6:25 pm

    Hmmm… It worked for me in Firefox 3.6. Which version of FF are you using?



RSS From Toby’s Blog

More posts from themightymo.com

WordPress Support

The Ultimate Guide to WordPress Support: Why it’s Essential for Your Website’s Success

By The Mighty Mo! Design Co. | September 25, 2023

Whether you’re situated in Minneapolis, St. Paul, Illinois, New York, or any other corner of the globe, ensuring reliable WordPress Support is paramount for the continued success of your website. In this comprehensive guide, we will delve into the crucial role that WordPress support plays in your website’s journey to success.

sem rush log file analyzer

How to optimize your Google Crawl Budget using SEM Rush Log File Analyzer and Rank Math SEO

By The Mighty Mo! Design Co. | September 22, 2023

Today I ran the SEM Rush Log File Analyzer tool, and it showed some interesting things that are a complete waste of our Google Crawl Budget. Specifically, I learned that Google is wasting some of our crawl budget on the /wp-includes/ directory, certain plugin directories, and cache directories. I also noticed random files being crawled…

google analytics definitive guide

Where is the Google Analytics Measurement ID?

By Toby Cryns | August 16, 2023

In the vast, evolving world of web development and analytics, keeping up with terminologies and tools can sometimes feel like trying to chase a mischievous cat in a maze. You think you’ve got a grip, only for it to slip right through your fingers! Enter the mysterious “Measurement ID” from Google Analytics 4 (GA4), a…

RSS From Toby’s Blog