jQuery UI tooltip in wordpress site

Question

Trying to get a tooltip working with a picture instead of text. As far it works with text in my site.

<a id="thisId" href="#" title="hello world" >ALOHA!</a>

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

This works fine.. It displays "hello world" on hover of link.

But if I try the following; working jsfiddle example ,but on my WP site it fails by simply not showing anything. Why could that be?

Answer 1

This mostly happens because your WordPress theme automatically uses Bootstrap which has its own tooltips. Its tooltips also use the same function tooltip(), so it's just a naming conflict between JQuery UI & BootStrap.

To fix this you can force renaming the tooltip() function used in JQuery Ui, like this:

jQuery.widget.bridge( 'jQueryUITooltip', jQuery.ui.tooltip );

And from now on use jQueryUITooltip() instead of tooltip() to initialize JQuery UI tooltips, example:

jQuery(document).ready(function(){
    jQuery( '#thisId' ).jQueryUITooltip({
       track: true
    });
});