jQuery UI tooltip in wordpress site

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.

Read More

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?

Related posts

Leave a Reply

1 comment

  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
        });
    });