title: How to attach div to mouse pointer so it will work properly during scrolling
body: <p>I'm trying to attach some kind of tips above buttons and show them on hover so they will appear directly aside to mouse pointer. I want to store text for those tips in data-attributes of buttons and create them dynamically using jquery. I use .pageX .pageY stuff to find coordinates of cursor, but it's working fine only in certain point of scroll.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').mouseenter(function (e) {
      var data = $(this).data('value');
      if(data){
          $('&lt;div /&gt;', {
                      'class' : 'tip',
                      text : $(this).data('value'),
                      css : {
                          position: 'fixed',
                          top: e.pageY-230,
                          left: e.pageX+15
                      }
                  }).appendTo(this);
  }
  })
  .mouseleave(function () {                                              
     $('.tip', this).remove();                  
  })
  .mousemove(function (e) {      
      $('.tip', this).css({
          top: e.pageY-230,
          left: e.pageX+15
      });                 
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
  margin: 10px;
  }
  .divs {
      width: 100%;
      height: 350px;
      background-color: #ddd;
      margin: 0px;
  }
  .tip {
      border: 1px solid #eee;
      background: #fff;
      box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
      padding: 3px; 
      font-weight: bolder;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="divs"&gt;&lt;/div&gt;
      &lt;button data-value="Per"&gt;First&lt;/button&gt;
      &lt;button data-value="Aspera"&gt;Second&lt;/button&gt;
      &lt;button data-value="Ad"&gt;Third&lt;/button&gt;&lt;br&gt;
      &lt;button data-value="Astra"&gt;Yadi&lt;/button&gt;
      &lt;button data-value="To infinity"&gt;Yada&lt;/button&gt;
      &lt;button data-value="and beyond!"&gt;Bla-bla&lt;/button&gt;
  &lt;div class="divs"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You better watch it: <a href="http://jsfiddle.net/millerJr/ps8vf8ce/" rel="nofollow">http://jsfiddle.net/millerJr/ps8vf8ce/</a></p>
  
  <p>So, how to attach those tips to pointer directly, regardless to scroll position? Thanks!</p>