jquery qtip ajax,jquery - qTip2 positioning with ajax - Stack Overflow

I am creating a tooltip for a set of menus and the content is loaded from an ajax call. I need the content to refresh every time the tooltip is created. I am using this guide: http://qtip2.com/guides#content.ajax.loading (Right above where it says "Grab content continuousl")

It works, the content is loaded, however the positioning of the tooltip doesn't change such that the arrow is off-centered. The tooltip grows only to the right and doesn't re-position itself.

The code:

$('.dropdown').qtip({

overwrite: true,

position: {

effect: false,

my: 'top center', // Position my top left...

at: 'bottom center' // at the bottom right of...

},

style: 'qtip-menu',

show: {

delay: 200

},

hide: {

delay: 200,

fixed: true

},

content: {

text: function(event, api) {

var id = $(this).data('id');

api.elements.content.html('Loading...');

return $.ajax({

type: 'post',

url: '=base_url();?>loadajax/menu',

data: { id: id }

})

.done(function(html) {

return html;

})

.then(function(content) {

return content

}, function(xhr, status, error) {

api.set('content.text', status + ': ' + error);

})

.always(function() {

$('.dropdown').qtip('reposition');

});

}

}

});

As you can tell, I tried re-positioning after the success of the ajax call, doesn't do anything tough.