Ajax tooltip doesn't disappear if mouse moves too fast - php

Question

I have a tooltip loaded with ajax for each item on my webpage. When you move the mouse too fast, it doesn't take the mouseleave event into account. Then, I tried to load the tooltip content with the page. However, there are a lot of contents so it takes four more seconds to load :/
What can I do?
Here is my jquery code :
$('.main').on({
mouseenter: function(){
var id = $(this).parent().data('candy');
if(id != 0){
$.ajax({
url: 'tooltip.php',
type: 'get',
data: { 'type': 'candy', 'item_id': id },
global : false,
success: function(data){
$('.candyTooltip').html(data);
$('.candyTooltip .layer_item').show();
}
});
}
},
mouseleave : function(){
$('.candyTooltip .layer_item').hide();
}
}, '.candy');
Also, I don't know if it's relevant but the SQL query takes 1,2ms and the PHP script takes 3,94ms.

Answer 1

I finally found a way to do it !!!
All I had to do was put the ajax request inside a variable and abort it on mouseleave.
So, now it looks like this :
$('.main').on({
mouseenter: function(){
var id = $(this).parent().data('candy');
if(id != 0){
query = $.ajax({
url: 'tooltip.php',
type: 'get',
data: { 'type': 'candy', 'item_id': id },
global : false,
success: function(data){
$('.candyTooltip').html(data);
$('.candyTooltip .layer_item').show();
}
});
}
},
mouseleave : function(){
if (query) { query.abort(); }
$('.candyTooltip .layer_item').hide();
}
}, '.candy');