在动态加载内容期间取消jquery工具提示

Question

I'm using the jQuery tooltip to show content that is dynamically loaded (javascript below). In some cases when the mouse moves away from the element the tooltip doesn't go away. My theory is that the loading of the dynamic content introduces a slight delay so the mouse moves away from the element just before the tooltip function completes and so it doesn't consume the mouseleave event. Any way to resolve this?

element.tooltip(
        {
            items: "table.orderlist label",
            open: function (event, ui)
            {
                ui.tooltip.css("max-width", "600px");
                ui.tooltip.css("max-height", "300px");
                ui.tooltip.css("overflow", "hidden");
            },
            content: function (callback)
            {
                //Get the contents as the tooltip is popping up
                MyAjaxCall(iID,
                    function (result)
                    {
                        try
                        {
                            //success
                            callback(result) //returns the result
                        }
                        catch (e)
                        {
                            DisplayError(e);
                        }
                    },
                    function (result)
                    {
                        //Error
                        DisplayError(result);
                    });
            }
        });

Answer 1

Your content function should be a bit more complicated, the possible solution is:

content: function (callback)
{    
    var $this = $(this), isMouseOn = true; 
    // check if tooltip ajax-request is in progress 
    // really needed for slow scripts only
    if($this.data('tt-busy')) return;
    // check if el is hovered (in jquery <= 1.8 you can simly use .is(':hover')
    $this
        .data('tt-busy', true)
        .on('mouseenter.xxx', function() { isMouseOn = true; })
        .on('mouseleave.xxx', function() { isMouseOn = false; });  
    //
    $.get('slow.script', function(d) {
        if(isMouseOn) callback(d);
    }).always(function() {
        // even if result fails set loading var to false and unbind hover events
        $this
            .data('tt-busy', false)
            .off('.xxx');
    });
}