title: jquery using mouse coordinates to offset 'tooltip' style hover function
body: <p>I am trying to create a small div which appears when a particular element is hovered over. I also want to offset the position of the div using mouse co-ordinates that change as the client moves the mouse. </p>
  
  <p>My guess is that to calculate this and return the new values for the div is expensive and draining resources seeing as the div's movement staggers.</p>
  
  <p>Does anyone know how to make this method more efficient?</p>
  
  <p>I have used the <a href="http://jquery.bassistance.de/tooltip/demo/" rel="noreferrer">tooltip plugin</a> which has a nice tracking feature, and moves the element really smoothly. </p>
  
  <p>My js;</p>
  
  <pre><code> $(document).ready(function(){
          $('#utilities').mouseover(function(event) { 
              var left = event.pageX - $(this).offset().left + 100;
              var top = event.pageY - $(this).offset().top + 130;
              $('#gas-electric-hover').css({top: top,left: left}).show();
              //console.log (left, top);
          });
          $('#utilities').mouseout(function() {
              $('#gas-electric-hover').hide();
          });
      });
  </code></pre>
  
  <p>I've also created this <a href="http://jsfiddle.net/lharby/wKEx8/" rel="noreferrer">jsfiddle</a>. In fact locally this code is staggering but the jsfiddle only appears to be updating the coords as the mouse enters and leaves the target div. </p>
  
  <p>Any help greatly appreciated. </p>