title: How to get the coordinates in html using .hover event in jquery?
body: <p>Can everybody help me on how to create a tooltip that contain the x y coordinates? Here is my sample code:</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
          a img {
              border: 3px solid blue;
          }
  
          #largeImage {
              position: absolute;
              padding: .5em;
              background: #e3e3e3;
              border: 1px solid #bfbfbf;
          }
      &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function() {
              var offsetX = 20;
              var offsetY = 10;
  
              $('a').hover(function(e) {
                  var href = $(this).attr('href');
  
                  var x = e.pageX - this.offsetLeft;
                  var y = e.pageY - this.offsetTop;
  
                  $('&lt;div id="largeImage"&gt;' + 'X: ' + x + ' Y: ' + y + '&lt;/div&gt;')
                  .css('top', e.pageY + offsetY)
                  .css('left', e.pageX + offsetX)
                  .appendTo('body');
              }, function() {
                  $('#largeImage').remove();
              });
  
              $('a').mousemove(function(e) {
                  $('#largeImage')
                  .css('top', e.pageY + offsetY)
                  .css('left', e.pageX + offsetX);
              });
          });
      &lt;/script&gt;
  
  &lt;body&gt;
      &lt;a href="Images/FredLarge.jpg"&gt;
          &lt;img src="Images/FredSmall.jpg" alt="squidward" /&gt;
      &lt;/a&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What happened in this example is that the coordinates aren't changing. Although it gets the coordinates but it doesn't change. </p>
  
  <p>*This code is actually like a tooltip of image, so just ignore the id name.</p>