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

  • Where uncertainty exists, don’t order specific.
    4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • “Now THAT was a good meeting!”
    A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you. The post “Now THAT was a good meeting!” appeared first […]
  • Never Respond to RFPs & Custom Proposal Requests
    Y'all who work at normal 9-5 jobs don't need to deal with the B.S. that is an RFP process (or rather you get paid to deal with it). But us freelancers gotta deal with a whole big bag of schtuff when it comes to custom proposals. Here's my quick-and-dirty RFP filtering process that I use […]

More posts from themightymo.com

My WordPress Maintenance Process

By The Mighty Mo! Design Co. | March 2, 2023

A few quick things: My WordPress Maintenance Process Demo, Part 1 Transcript: You’ll see immediately after logging in, you see the 11 updates needed as well as some messages. I’m just gonna quickly read. It looks like this. I don’t need to worry about. Are you enjoying Monster Insights? Not really <laugh>. What’s to enjoy…

How to style FacetWP checkbox hierarchy results using jQuery

By The Mighty Mo! Design Co. | February 21, 2023

I recently invested many hours trying to target and style a FacetWP taxonomy facet that uses hierarchy for display. It should be noted that you can use straight up CSS for some styling (and should use css wherever possible), but sometimes you need javascript to target parent elements and such. I thought I’d document the…

How to fix SpinupWP ballooning disk space issue

By The Mighty Mo! Design Co. | February 1, 2023

A site we host on Digital Ocean recently went down. It took me a lot of troubleshooting and digging before realizing that the issue was that our disk space was maxed out on Digital Ocean. The site in question needs ~20gb of space, so our 50gb server should be plenty. But alas, there it was…

RSS From Toby’s Blog

  • Where uncertainty exists, don’t order specific.
    4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • “Now THAT was a good meeting!”
    A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you. The post “Now THAT was a good meeting!” appeared first […]
  • Never Respond to RFPs & Custom Proposal Requests
    Y'all who work at normal 9-5 jobs don't need to deal with the B.S. that is an RFP process (or rather you get paid to deal with it). But us freelancers gotta deal with a whole big bag of schtuff when it comes to custom proposals. Here's my quick-and-dirty RFP filtering process that I use […]