Tooltip help

Tooltip help

I'm new to jQuery and I'm trying to create a tooltip. I made a very simplified version of what I've done so far below that you can run. I get the tooltip to fade in when the mouse is over the span and when the mouse leaves the span the tooltip fades out. Now if the user wants to, say, copy the contents of the tooltip or click on a link inside the tooltip then the tooltip has to fade back in as the mouse leaves the span and goes over the tooltip. Therefore the tooltip can't fade out too fast because the user has to have time to move the mouse over to the tooltip to stop it from fading out. In the following code example I'm able to do all that however, I don't know how to get the tooltip to fade back in as the mouse moves over the tooltip without what appears to be a sudden "blink".
 
  1. <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8" />
      <title>jQuery</title>
     </head>
     <body>
      <span id="Info">Hover this for tooltip!</span>
      <p class="help" id="Help">This is a tooltip!</p>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script>
       $("#Info").mouseover
       (
        function(event)
        {
         $("#Help").css("position", "absolute");
         $("#Help").css("left", event.pageX);
         $("#Help").css("top", event.pageY);
         $("#Help").stop(true, true);
         $("#Help").fadeIn();
        }
       );




















  2.    $("#Info").mouseleave
       (
        function()
        {
         $("#Help").fadeOut(1500);
        }
       );





  3.    $("#Help").mouseover
       (
        function()
        {
         $("#Help").stop(true, true);
         $("#Help").fadeIn();
        }
       );






  4.    $("#Help").mouseleave
       (
        function()
        {
         $("#Help").fadeOut(1500);
        }
       );





  5.    $("#Help").hide();
      </script>
     </body>
    </html>