Qtip it does not work the first time click, next click all OK

Question

I'm using the jQuery qtip plugin. I want the content of the qtip to be an php code, loaded dynamically. Here my ajax code:

$(document).ready(function(){
$('.mapa').qtip({
         show: 'click',
         hide: 'click',
         content:{
                    text: function(event, api) {
                             $.ajax({
                                   url: '/google_maps/mapa.php'
                                   })
                            .then(function(content) {
                               api.elements.tooltip.html(content);
                            }, function(xhr, status, error) {
                               api.set('content.text', status + ':  ' + error);
                            });
                            return 'Loading...'; // Set some initial text

                    },
                },
        position: {
        my: 'top right',
        at: 'top center',
        },
        style: {
        classes: 'qtip-blue',
        }
    });
});

Then I select a link with the id="mapa" to load Qtip with php code the fisrt click no load php code in Qtip, the second and next click, Qtip work OK. If i refresh page, again no work first, second all OK. Can anyone help me? Error committing in my call on ajax? Or elsewhere? Thank you very much for any help.

Answer 1

If you try changing api.elements.tooltip.html(content); to api.set('content.text', content); , does it show your content on the first click?