Open Jquery-ui Tooltip only on click

Question

I've this code

function DrawTipsProgress(postid, ajaxurl) {

    var data = {
        action: 'ajax_action',
        post_id: postid
    }

    jQuery('#dashicon-' + postid).on("click", function () {

        jQuery.post(ajaxurl, data, function(response) {

            jQuery('#dashicon-' + postid).tooltip({

                position: { my: 'center bottom' , at: 'center top-10' },
                tooltipClass: "myclass",
                content: response

            });

            jQuery('#dashicon-' + postid).tooltip('open');

        });

    });

}

On first click, it work as aspected. If later I try to hover again the button without click it the tooltip popup again, and the click just do the ajax call but doesn't open the tooltip.

Diagnostician

Answer 1

The tooltip is triggered on hover. In your code, it is not being bound to the element until the 'click' event occurs, so it's not really the click causing it to display... it's the hover following the click. I believe what you need to do is use enable and disable. Here is an example fiddle. http://jsfiddle.net/ecropolis/bh4ctmuj/

<a href="#" title="Anchor description">Anchor text</a>

$('a').tooltip({
    position: { my: 'center bottom' , at: 'center top-10' },
    tooltipClass: "myclass",
    disabled: true,
    close: function( event, ui ) { 
        $(this).tooltip('disable'); 
        /* instead of $(this) you could also use $(event.target) */
    }
});

$('a').on('click', function () {
     $(this).tooltip('enable').tooltip('open');
});

Exceptionable

This is how an accepted answer should look like, with explanation and working example. Thank you. – Ideo

Add ajax , make it complete – Neoma