Twitter Bootstrap Tooltip (PHP) not working in Wordpress

Question

I am trying to use the Twitter Bootstrap Popover / Tooltip but I am getting the following error in the console:

Uncaught TypeError: Object #<Object> has no method 'popover'

I have the following in my functions file to include the files, which can be seen in the source and direct to the correct scripts when clicked:

add_action('wp_enqueue_scripts','dcr_enqueue_scripts');

if(!function_exists('dcr_enqueue_scripts')):
function dcr_enqueue_scripts(){

    wp_register_script('tooltip',get_template_directory_uri().'/js/bs-tooltip.js','jquery');
    wp_register_script('popover',get_template_directory_uri().'/js/bs-popover.js',array('jquery','tooltip'),'1.0');
    wp_enqueue_script('tooltip');
    wp_enqueue_script('popover');

}
endif; 

With the following element expecting the popover:

<th><span>Description:</span><img class="popoverthis" src="<?php bloginfo('template_url')?>/images/info.png" data-content="This is the content" title="Title"></th>

And the jQuery included on the page to call the popover function is this:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.popoverthis').popover({
        placement: "bottom"
    });
});

Any ideas on resolving this issue would be appreciated.

Answer 1

Few things to check for:

• order of pages loading - is your popover being execute before jquery or jquery.popover.js plugin is being called?

If this is issue, you'll have to bump/lower priority of your enque script as in:

add_action('wp_enqueue_scripts','dcr_enqueue_scripts', **5**); // default is 10

• do you have correct version of jQuery (wordpress bundles one and it sometimes can be older than is required for external scripts)?

• Open firebug/web inspector and manually run:
  jQuery('.popoverthis').popover({ placement: "bottom" });

To see what goes wrong

Update : there are few more things that can go wrong (and this is list how to fix your problem):

• You are including two jQuery's on the site (probably by another plugin) - 1.4.2 comes after 1.7.2 and breaks basic bootstrap javascripts.
• You're missing Bootstrap CSS info that is required by this plugin. It actually works, but it displays the tooltip info in the bottom of the site since CSS is not there to make it look pretty.

Solution : use a standalone popovover plugin like this one by crowdfavorite: https://github.com/crowdfavorite/jquery-popover and also include its CSS files.

(you could also pull in bootstrap's CSS but it will probably break your sites CSS )

Answer 2

I can't see any call to $.noConflict();

http://api.jquery.com/jQuery.noConflict/

I tried jQuery('.popoverthis').hide() from the console with the same result, just before the site went down.