I like using the qTip library to handle dynamic tooltips in my sites. I also use WordPress as my CMS-of-choice. Unfortunately, I found that they don’t, by default, play very nicely together.

I’ve attached my modified version of the qTip library (based on v.1.0.0-rc3 — current at the time of writing) which solves these issues.

Changes

Here’s what I had to fix in order to make this compatible:

  1. There’s a bug in qTip that is still lingering. It only becomes an issue when using a recent version of jQuery. I had to make the modifications described in the link mentioned previously.
  2. WordPress can’t give jQuery exclusive usage of the “$” variable, so all “$” references must be changed to “jQuery.” This script has been updated to reflect those changes.

Download

As promised, the modified Javascript file is available here: Wordpress-Friendly qTip Library (952).

Usage

To use this (or any) Javascript file in WordPress, you’ll need to add a few lines to the “functions.php” file of your active theme.

//make sure we've loaded jQuery
wp_enqueue_script('jQuery');

/*
* Adds the qTip javascript library.
*/
function addQtip() {
 wp_enqueue_script('qtip',get_bloginfo('template_directory') . '/js/jquery.qtip-1.0.0-rc3.min.js');
}
add_action('init', 'addQtip');

This script assumes that you’ve uploaded the attached Javascript file in the “js” directory of your active theme. If you have it elsewhere, you’ll need to adjust the reference in the “wp_enque_script” line.

And that’s it! You should now be able to use qTip within WordPress.