JQuery - Hover event not firing on Hover out
<p>I am implementing my own 'tooltip' where it creates a new div element every time you hover over it and removes it on hover out. The code below is stripped down from what I use but it shows the problem: This piece of code works perfect when a user slowly puts their mouse over and off the $('#' + fieldName) object but when you move your mouse on the object and then quickly pull it off the tooltip does not get removed. Is there a way to improve my code?  </p>

<p>I tried implementing a system where I create all the tooltip boxes and hide them, then show them on hover, but it posed the same problem with the mouse moving quickly off the object and the hover out not firing. </p>

<pre><code>$('#' + fieldName).hover(
    function () { /* Create new DOM element */
        /* My ajax stuff here */
        var data = 'test';
        var tooltipBox = $('&lt;div id="' + fieldName + '_tooltip"&gt;' + data + '&lt;/div&gt;');
        $("body").prepend(tooltipBox);
    },
    function () { /* Remove Tooltip from DOM */
        $('#' + fieldName + '_tooltip').remove();
    }
);
</code></pre>

<p><strong>Answer:</strong></p>

<p>With help from Robert Koritnik and sajawikio:</p>

<p>If you need to make tooltips on hover with AJAX calls in the hover you can do a small hack to make it work.</p>

<pre><code>var callingAjax = false;
var removeTooltip = false;
$('#tooltip').hover(
     function() {
          callingAjax = true;
          $.post(.. {
              callingAjax = false;
              /* do stuff */
              if(removeTooltip)
                   /* code to remove tooltip */
              removeTooltip = false;
          });
     },
     function() {
          if(callingAjax) 
              removeTooltip = true;
          else
              /* code to remove tooltip */
     }
);
</code></pre>
