鼠标hover在链接旁边如何创建弹出框？

这是我想要实现的：

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

 foo   bar  

我还有两个链接描述作为divs：

 
foo means foo
 
bar means bar 

现在，当我将鼠标hover在foo的链接上时，会弹出相应的描述div，它应该会弹出光标所在的位置。

因此，如果我将鼠标hover在“foo”上，则包含“foo表示foo”的弹出框应该出现在鼠标光标旁边。 同样的事情适用于“酒吧”。

请使用javascript / jquery，CSS或其组合来快速简单地实现此方法。

PS我为之前没有解释清楚道歉，我实际上想要在描述div中添加更多链接或图像而不是纯文本，所以常规工具提示可能不会这样做。

谢谢。

Answer 1

这是最简单的解决方案。

HTML：

 foo bar 
foo means foo
 
bar means bar 

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(); }); 

演示： http ： //jsfiddle.net/8UkHn/

Answer 2

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

  foo  

看看这是否符合您的需求。

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

Answer 3

使用像funkytooltips这样的东西 。

不过还有很多其他的; 搜索“jquery link popup”等内容会更多。