cancel jquery tooltip during dynamic loading of content

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);
                    });
            }
        });

an overlay loader that disappears on complete load? – Arun Killu Oct 04 '13 at 18:50 — Arun Killu, Oct 04 '13 at 18:50

score 1 · Accepted Answer · answered Oct 04 '13 at 19:51

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');
    });
}

Thanks! what does "mouseenter.xxx" and "mouseleave.xxx" do? I'm not familiar with the .xxx — Jeremy, Oct 08 '13 at 21:20

cancel jquery tooltip during dynamic loading of content

1 Answers1

Linked