jqueryui tooltips fails to close when using ajax callback

Question

I've encountered an issue where using an ajax call with jQueryUI tooltip causes the tooltip to fail to close if you select multiple instances.

I've demonstrated it here, http://jsfiddle.net/MHptk/11/

var html = '';
var testbox = $("#testid"); //div element
for (var i=0; i<25; i++) {
html += '<a href="#" title="test!">test!</a><br />';
}

testbox.html(html);

testbox.tooltip(
    {tooltipClass:'preview-tip',
     content: function(callback) {
         $.ajax({url: '/echo/html/',
                 data: {
                     html: 'woop!',
                 },
                 method: 'post',
                 success: function(data) {
                     callback(data);
                 },
         });
     }, 
    });

Roll your mouse quickly over the links and you'll see the tooltips fail to close. In my real life example, I am creating a table with a jquery ajax call which contains multiple links that, themselves, will make an ajax request. I also tried using the open: to set content but the same issue occurred.

For a workaround, I think i can just populate the title attr directly when creating the table but this isn't suitable given the highly volatile nature of the data.

Answer 1

I think just the large number of links so close together coupled with the ajax call is causing the issue. If you spread them out a little I don't see the same issue. That is a lot of ajax calls firing in rapid succession.

I just inserted a <p>no link</p> into your fiddle to give it more room

new fiddle link

Answer 2

You can somewhat mitigate the issue by inserting the following into tooltip...

close: function( event, ui ) {
    $(".ui-tooltip").hide();
}

While the div's are supposed to hide on close, adding this code hides all the ui-tooltip div's. when one closes. I've tested this on the fiddle referenced in the original message and the results are good.