qTip Library with WordPress 3
- November 16th, 2010
- Posted in Professional
- Write comment
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:
- 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.
- 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 (692).
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.
Where in the functions.php files should you add the script? Does it matter? Thanks.
It shouldn’t matter. Each page load is going to read in the entire functions.php file so that it can reference any of those functions later on.
The only thing you’d need to check is making sure that there’s not already a function with the same name later on in the file.
Dear Jeffrey
I so want to be able to use qTips in WordPress… but I am too much of an novice to be able to know what to do after you say “and that’s it!”. I am trying to add margin tips to an online university campus guide.
It seems like the qTip configuration plugin JR qTip for WordPress no longer works (based on the plugin forums and it doesn’t install). So I’m assuming I have to HTML code the tips into the WordPress posts by figuring it out from Craig’s qTip tutorials. What a shame! Would be very grateful if you could confirm there isn’t an easier way to do this that I’m missing…?
I think I uploaded the javascript correctly to the js subdirectory of the theme and I added the code to functions.php but when I’m in WordPress I see nothing new/no way to add it in a user-friendly way. So I’m off to try the hard HTML way now…
Thanks again for posting this workaround and sorry for being a lazy publishing person not a code-cuddler…
Imogen
Imogen,
Unfortunately, you’re correct. I don’t know of a supported WP plugin that handles QTip. It wouldn’t be too much work to set that up based on the fixes above, but to my knowledge no one has done that yet.
So you’re on the right track. Upload the JS file and make the change to the functions.php file in the active theme. Then the QTip library becomes “available” (i.e. the library is loaded into javascript). So you’re ready to use it by editing some HTML following Craig’s tutorials to add a tool tip. Just make sure you use “jQuery” isntead of the “$” or WordPress will be grumpy.
For instance: jQuery(‘item’).qtip({…});
Jeff-
I’ve put the following into my functions.php file:
//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’) . ‘/scripts/jquery.qtip-1.0.0-rc3.min.js’);
}
add_action(‘init’, ‘addQtip’);
and I’ve added the following directly aboev the tag in my footer.php file:
jQuery(‘area[title]‘).qtip({ style: { name: ‘cream’, tip: true } })
Old tooltips are still showing on mouseover of the images (areas of a image map, in this case) that I want to use qTip on. Also tried replacing ‘area’ in the latter code with ‘a’ and ‘img’, to no avail. Any idea what I’m doing wrong?
The latter code is wrapped in script tags, fyi. They got removed when i posted.
Now, how can I use it in a post/page? Is there a shortcode or syntax? Please let me know. Thanks.
Sadly, I haven’t set anything like that up. This will just get it working on the back-end. You would need to create a plug-in that utilizes these fixes then adds extra functionality in order to make it available via shortcode.