title: Overlay div onto td cell using jquery.position upon mouseover event
body: <p>I have a large table with numbers only and a small font-size, which makes it hard to see. Increasing font-size is not a option, but I want to supply a zoom like effect (without having to use browser zoom) using a simple div overlay upon hovered td cell if it has any content.<br>
  The div should be centered on the td cell and the content of the div should be replaced the text content of hovered td cell.</p>
  
  <p>Where is my error ?<br>
  <em>Note: I am using .delegate() instead of .hover() because I already am doing other stuff which require delegate.</em></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="mine"&gt;&lt;table border="1" cellspacing="2" cellpadding="2"&gt;
      &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/div&gt;
  &lt;div id="your"&gt;vale&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#your {
      position: absolute;
      width: 40px;
      height: 30px;
      z-index: 100;
      border: 1px solid green;
      text-align: center;
      vertical-align: middle;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
    $('#mine').delegate('td', 'mouseover mouseleave', function(e) {
      if ($(this).text().length &gt; 0) {
        if (e.type == 'mouseover') {
          $('#your').position({
            my: "center bottom",
            at: "center top",
            of: this,
            offset: "0 -20", // Place it above td cell
            collision: "none"
          });
          $('#your').clearQueue();
          $('#your').text($(this).text()).fadeIn(200);
        } else {
          $('#your').delay(300).fadeOut(200);
        }
      }
    });
  });
  </code></pre>
  
  <p><strong>Edit</strong> I am seeing <code>#your</code> flying all over the place at first run, then the next few hovers it works, but then it begins to pop up all weird places - including outside <code>#mine</code>.</p>