title: Create a Tooltip Out from arbitrary HTML Table
body: <p>I am trying to create a tooltip on a web page.  I want the user to be able to roll over a link, and when they do, display arbitrary html.  In this case, its a simple table, containing some meta data.  I have tried using <code>jquery.tools</code>, but I am not sure how to use it correctly.  Here is the idea:</p>
  
  <pre><code>&lt;a id="foo"&gt;FOO&lt;/a&gt;
  &lt;div id="tooltip-content"&gt;
      I am visible when the user hovers over FOO
      &lt;table&gt;
         &lt;tr&gt;
           &lt;td&gt;Name&lt;/td&gt;
           &lt;td&gt;Foo&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
           &lt;td&gt;Value&lt;/td&gt;
           &lt;td&gt;Waka waka&lt;/td&gt;
         &lt;/tr&gt;
         ....
      &lt;/table&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>When the user hovers over the link text FOO, I want the div and its content to become visible, floating near the mouse, I don't care if its above, below, left or right of the link text.  It just needs to work.  What is the simplest / best way to do this?  I don't think I can use the title attribute of the link since I want to support an html table, is that correct?  How do I do this?</p>