I’m having what appears to be a hard conflict between Jquery Isotope and Qtip2. When Isotope is loaded, qtip doesn’t work, and when it SHOULD be activating, I get the JS error in my Chrome console:
"Uncaught TypeError: Cannot call method 'call' of undefined" avia.js?ver=1:1326
Avia.js is a larger script file in my parent theme that contains Isotope in its entirety. Line 1326 is, you guessed it, the line containing Isotope.
When I remove Isotope from that file, Qtip works perfectly. Unfortunately I am in a situation where I really need both to work.
I set up a jsfiddle with all the same versions I’m using, and it works for some reason even though I went out of my way to use all the same versions: http://jsfiddle.net/TABd4/8/
So here is how I’m loading my scripts. In my child-theme’s (Could there be an issue using a child theme?) functions.php:
//Load jquery version
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', get_stylesheet_directory_uri() . '/scripts/qtip/jquery-1.8.3.min.js', false, null);
wp_enqueue_script('jquery');
}
//Enqueue our scripts and stylesheet
function theme_name_scripts() {
wp_enqueue_style('qtip', get_stylesheet_directory_uri() . '/scripts/qtip/jquery.qtip.min.css', null, false, false);
wp_enqueue_script( 'imagesloaded', 'http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.js', null, false, true);
wp_enqueue_script('qtip', 'http://qtip2.com/v/nightly/jquery.qtip.js', array('jquery', 'imagesloaded'), false, true);
wp_enqueue_script( 'qtipscript', get_stylesheet_directory_uri() . '/scripts/qtip/qtipscript.js', array('jquery', 'qtip', 'imagesloaded'), null, true);
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
And here is what I’m running to trigger qtip (qtipscript.js);
$('.hasTooltip').each(function() { // Notice the .each() loop, discussed below
$(this).qtip({
content: {
text: $(this).next('div') // Use the "div" element next to this for the content
},
style: {
classes: 'qtip-light qtip-shadow qtip-packages'
},
position: {
my: 'top left',
at: 'bottom left',
target: 'event'
}
});
});
Found the solution:
You need to include the newest version of imagesLoaded (3.0.4 worked for me) AFTER your Isotope script. In my case, I just hardcoded the script into my footer after all the other scripts were loaded, and it fixed the problem.
Turns out it is a known conflict, but the page on it never showed up in my Google searches. There is more info for it here on the qtip site:
http://qtip2.com/guides#integration.isotope