title: How to create popup boxes next to the links when mouse over them?
body: <p>Here is what I want to implement:</p>
  
  <p>I have two hyperlinks that are displayed on the webpage:</p>
  
  <pre><code>&lt;a href="http://foo.com"&gt; foo &lt;/a&gt;
  
  &lt;a href="http://bar.com"&gt; bar &lt;/a&gt;
  </code></pre>
  
  <p>and I also have two descriptions to the links as divs:</p>
  
  <pre><code>&lt;div id="foo"&gt;foo means foo&lt;/div&gt;
  
  &lt;div id="bar"&gt;bar means bar&lt;/div&gt;
  </code></pre>
  
  <p>Now, when I mouse over the link of foo, the corresponding description div should pop up, and it should pop up right next to where my cursor is.</p>
  
  <p>So if I mouse over "foo", a pop-up box containing "foo means foo" should appear right next to the mouse cursor. Same thing applies to "bar".</p>
  
  <p>Please show a quick and simple way to implement this, with javascript/jquery, CSS, or combination of these.</p>
  
  <p>P.S. I apologize for didn't explain clearly earlier, I actually want to add further links or images into the description div instead of pure text so a regular tool-tip perhaps would not do.</p>
  
  <p>Thanks.</p>