qTips and Wordpress

[davidcsonka]

Craig, qTips is indispensable, I use it in all my major web dev projects. Thank you!

I'm now also trying to use it in conjunction with Wordpress but am having great difficulty. I've see two other threads about Wordpress on your forums here, but neither was particularly helpful.

Do you have any tutorials or advice on best practices for integrating qTips with Wordpress?

I've tried just about every imaginable way of loading the scripts and calling the functions to generate the tool tips but nothing works.

I've referenced these threads on your forums:
http://craigsworks.com/projects/forums/t...flict-mode
http://craigsworks.com/projects/forums/t...ntegration

As well, some other wordpress/jquery help sites:
http://codex.wordpress.org/Function_Refe...eue_script
http://digwp.com/2009/06/including-jquer...right-way/
http://www.ericmmartin.com/5-tips-for-us...wordpress/

Nothing from those sites has produced a working result for me. :/

[Craig]

David, I've not actually used Wordpress enough to comment on how to include it... however, it should be as simple as using it on a regular static HTML page. Simply make sure you've set jQuery to noConflict() mode to make sure no other libraries conflict with the $ variable. Then, include the qTip script and call it as usual (making sure to either use encapsulated function to pass $ in properly, or use jQuery keyword instead:

JS Code

(function($, window, undefined) {
 
   $('.selector').qtip({
      content: 'blah'
   });
 
)(jQuery, this));

[GuillaumeL]

Hi,

Thank you for your script Craig. After a few hours searching for working qTip with Wordpress, I found it and I can now work with all his great features.

I post this solution here but it's based on links quoted by davidcsonka and an update of Jeffrey D. Allen of the qTip 1.0.0 RC3 version available on this page: http://jdadesign.net/2010/11/qtip-librar...rdpress-3/ . The change reasons are detailed.

The problem of most Wordpress users wich want to use qTip must be simply that jQuery is already called (with a plugin installed by user or a plugin from their template) but after calling qTip (called manually). To resolve this problem:

1. Download the Jeffrey D. Allen version of qTip and upload it in the folder of your choice (wp-includes/js/... or yourtheme/scripts/... for examples)
2. Add these lines in functions.php (a Wordpress file in your theme folder) with your own folder url where you upload qTip:

JS Code

function addQtip() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
		wp_enqueue_script('qtip','YOUR-FOLDER-URL/jquery.qtip-1.0.0-rc3.min.js');}}
add_action('init', 'addQtip');

This will load jQuery before qTip.

3. Use "jQuery" at each place of "$" in your tooltip script adds. Wordpress sets jQuery by default to no conflict mode.

I hope it will be helpfull and sorry for my bad english.