Javascript 当鼠标悬停在链接旁边时，如何创建弹出框？

以下是我想要实现的：

我在网页上显示了两个超链接：

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

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

我还将链接描述为两个div：

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

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

foo表示foo
酒吧的意思是酒吧

现在，当我将鼠标移到foo的链接上时，相应的description div应该会弹出，它应该会在光标所在的位置旁边弹出

因此，如果我将鼠标移到“foo”上，鼠标光标旁边会出现一个包含“foo意味着foo”的弹出框。同样的道理也适用于“酒吧”

请用javascript/jquery、CSS或它们的组合展示一种快速而简单的实现方法

---

另外，我很抱歉之前没有解释清楚，我实际上想在description div中添加更多的链接或图像，而不是纯文本，这样常规的工具提示可能就不行了

---

谢谢。

您是否考虑过在这种情况下使用“title”属性

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

看看这是否符合你的需要

---

它的作用是，当您将鼠标移到链接“foo”上时，鼠标指针旁边会出现一个包含“foo表示foo”的小框。

这是最简单的解决方案

HTML:

JavaScript:

$（“a”）.悬停（函数（e）{
$（$（this.data（“工具提示”））.css({
左：e.pageX+1，
顶部：e.pageY+1
}).stop（）.show（100）；
}，函数（）{
$（$（this.data（“工具提示”））.hide（）；
});
div{
位置：绝对位置；
显示：无；
边框：1px纯绿色；
填充：5px15px；
边界半径：15px；
背景颜色：淡紫色；
}

foo的意思是foo
bar的意思是bar
为什么不使用许多工具提示插件中的一个呢？我很抱歉没有解释清楚，我实际上想在description div中添加更多的链接或图像，而不是纯文本。所以我认为常规的工具提示不行。我认为这对您的需求来说可能很有趣。谢谢，但我实际上想在description div中添加更多的链接或图像，而不是纯文本。抱歉，没有解释清楚，Lysuper~这正是我想要的，简单，干净，没有第三方插件。。工作得很有魅力，谢谢！！
<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>

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

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