title: Cursor-following <div> - Disappears when mouse moves down or right
body: <p>I'm trying to use <a href="https://stackoverflow.com/questions/25934817/how-to-let-a-div-stick-to-cursor">this method</a> to get a div to <code>fadeIn</code> when a user mouses over a text field that tells them what sort of information goes into the field. I've got the <code>&lt;div&gt;</code> to follow the cursor while in the text field if the user moves the mouse <strong>up</strong> or <strong>left</strong>, but when I move the mouse <strong>down</strong> or <strong>right</strong> the <code>&lt;div&gt;</code> disappears during the motion to reappear when the mouse stops. <a href="http://jsfiddle.net/4ba70vy3/" rel="nofollow noreferrer">Here is a JSFiddle showing my relevant code and the odd behavior it's yeilding</a>.<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      $(document).bind("mousemove", function(e) {
          $(".hover").css({
              "left" : e.pageX,
              "top" : e.pageY
          });
      });
      $(".num").hover(function() {
          $(".hover").stop().html("Enter a number").delay(500).fadeIn(150);
      }, function() {
          $(".hover").stop().hide();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hover {
   display: none;
   position: absolute;
   float: left;
   font-family: Calibri, sans-serif;
   font-size: 0.7em;
   background-color: rgb(255,255,230);
   border: 1px solid black;
   -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.4);
   box-shadow: 0 0 2px rgba(0,0,0,0.4);
   padding: 1px 3px;
   z-index: 50;
  }
  input {
      margin: 30px;   
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class='hover'&gt;&lt;/div&gt;
  &lt;input type="text" class="num" size="2"&gt;</code></pre>
  </div>
  </div>
  I have tried applying the same <code>.hover()</code> JQuery method to other elements in my web page to see if it's a problem with applying it to a text field, but the down/right vanishing behavior persisted.</p>
  
  <p>In my full code, the hovering <code>&lt;div&gt;</code> is created dynamically when the user first mouse-overs an element which produces the effect, but I couldn't get that aspect to work is JSFiddle.</p>
  
  <p>Since this effect seems easily-produced by others I'd like to know not only how to achieve the correct behavior but also understand why my attempt came out so wonky.</p>