Tooltipster jQuery load issue in Wordpress

Question

I'm trying to add this Tooltipster script to my Wordpress site and have an issue with jQuery loading.

The instruction from the site says that this code should be added to the head tag (links to files are already modified for my site):

<link rel="stylesheet" type="text/css" href="http://oopsbox.me/wp-content/uploads/js/tooltipster.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://oopsbox.me/wp-content/uploads/js/jquery.tooltipster.min.js"></script>
<script>
    $(document).ready(function() {
        $('.tooltip').tooltipster();
    });
</script>   

Then adding a .tooltip class to any element should show a nice tooltip on hover etc.

This works perfectly when i try to do it on a separate page. For example here is my test page.

But when i try to add the same code to Wordpress header.php head tag to display tooltips on my main page the site stops working.

I think it's because of jQuery load line cause Wordpress already has one and uses newer version of jQuery (which Tooltipster should support).

I tried to remove Tooltip jQuery load line and leave only the one Wordpress has by default, but then tooltips don't work.

Could you tell what i'm doing wrong and what are the possible solutions here?

Huge bunch of thanks!

Alex

Answer 1

by the looks of it - it seems that jquery is in noconflict mode.

update your code by adding jQuery instead of $

<script>
    jQuery(document).ready(function() {
       jQuery('.tooltip').tooltipster();
    });
</script> 

Answer 2

Use your dev tools (f12 in Chrome) to see if those scripts are loading correctly. Wordpress is also not a fan of hardcoding your scripts like that for several reasons.

jQuery is already loaded with WP by default. Remove:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

Upload your scripts to your site using SFTP and put them in your theme folder then use the method below:

Always use WP wp_enqueue_script function

// for plugin use
wp_enqueue_script('my_script', plugins_url('my_plugin/jquery.tooltipster.min.js'));
// for theme use
wp_enqueue_script('my_script', get_bloginfo('stylesheet_directory') . '/jquery.tooltipster.min.js');