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

Question

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.

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

Answer 1

Here is the simpliest solution.

HTML:

<a href="http://foo.com" data-tooltip="#foo">foo</a>
<a href="http://bar.com" data-tooltip="#bar">bar</a>

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

CSS:

div {
    position: absolute;
    display: none;
    ...
}​

JavaScript:

$("a").hover(function(e) {
    $($(this).data("tooltip")).css({
        left: e.pageX + 1,
        top: e.pageY + 1
    }).stop().show(100);
}, function() {
    $($(this).data("tooltip")).hide();
});

 $("a").hover(function(e) { $($(this).data("tooltip")).css({ left: e.pageX + 1, top: e.pageY + 1 }).stop().show(100); }, function() { $($(this).data("tooltip")).hide(); }); 

 div { position: absolute; display: none; border: 1px solid green; padding:5px 15px; border-radius: 15px; background-color: lavender; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <a href="http://foo.com" data-tooltip="#foo">foo</a> <a href="http://bar.com" data-tooltip="#bar">bar</a> <div id="foo">foo means foo</div> <div id="bar">bar means bar</div> 

​DEMO: http://jsfiddle.net/8UkHn/

Answer 2

Have you considered using a "title" attribute in this case?

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

See if this fits your need.

What it does is, when you move mouse over the link "foo", a small box containing "foo means foo" will appear next to the mouse pointer.