Question

I have a tooltip with data loaded from ajax:

$('.show_tooltip').hover(
    function(){
        $.post('getdata.php', function(data)    {
            $('#tooltip').html(data);
            $('#tooltip').show()
        });
    },
    function(){
        $('#tooltip').hide(); 
    }
);

It works.
But the problem is – when I hover it over element and quickly move mouse out, so $('#tooltip').show() have no effect, and it hide(). But then when data is loaded it popsup and stays shown without any hover.

What can be done about that. Is there any way to stop post request altogether?

Answer 1

The jQuery AJAX methods return a jqXHR object which is an extension of the native XMLHttpRequest object, which has an abort method to stop the request:

var xhr;
$('.show_tooltip').hover(
    function(){
        //Save reference to the jqXHR object
        xhr = $.post('getdata.php', function(data) {
            $('#tooltip').html(data);
            $('#tooltip').show()
        });
    },
    function(){
        xhr.abort(); //Abort the request
        $('#tooltip').hide(); 
    }
);