How to show tipsy programmatically after an ajax call

Question

I want to display tooltip text dynamically from a server using an ajax call. Currently, the tooltip text is not updated on the first click, because the ajax call takes some time to receive the data.

$('.class').tipsy({
        gravity: $.fn.tipsy.autoNS,
        html: true,         
        opacity: 1,
        trigger: "click",
        hoverlock: true,
        title: function () {
            $.ajax({
               url: apiurl,
               type:'GET',
               success: function(data){
                    return '<p>' + data + '</p>';
               });              
        }
 })

How can I refresh tipsy or show tipsy tooltip programmatically?

Answer 1

Success function doesn't return expected behavior as it is callback function and return not applied to your title function so, you can try below code that might work which set success callback function to a new variable and return it to title function.

$('.class').tipsy({
            gravity: $.fn.tipsy.autoNS,
            html: true,         
            opacity: 1,
            trigger: "click",
            hoverlock: true,
            title: function () {
                var newTitle=''; //Or default like 'This is title'
                $.ajax({
                   url: apiurl,
                   type:'GET',
                   success: function(data){
                   // return '<p>' + data + '</p>';
                  //because it return is inside success callback no make sense for title function
                  newTitle='<p>' + data + '</p>';
                   });  
            return newTitle;            
            }
     })