How to create popup boxes next to the links when mouse over them?

Here is what I want to implement:

I have two hyperlinks that are displayed on the webpage:

<a href="http://foo.com"> foo </a>

<a href="http://bar.com"> bar </a>

and I also have two descriptions to the links as divs:

<div id="foo">foo means foo</div>

<div id="bar">bar means bar</div>

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.

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".

Please show a quick and simple way to implement this, with javascript/jquery, CSS, or combination of these.

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.

Thanks.