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.

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.

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/