Javascript 当鼠标悬停在链接上时，如何在链接旁边创建弹出框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10586962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create popup boxes next to the links when mouse over them?
提问by eastboundr
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 链接描述：
<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.
现在，当我将鼠标悬停在 foo 的链接上时，应该会弹出相应的描述 div，并且它应该会在我的光标所在的位置旁边弹出。
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".
因此，如果我将鼠标悬停在“foo”上，鼠标光标旁边应该会出现一个包含“foo 表示 foo”的弹出框。同样的事情适用于“酒吧”。
Please show a quick and simple way to implement this, with javascript/jquery, CSS, or combination of these.
请使用 javascript/jquery、CSS 或这些的组合来展示一种快速而简单的方法来实现这一点。
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.
PS 我很抱歉之前没有解释清楚，我实际上想在描述 div 中添加更多链接或图像，而不是纯文本，因此常规工具提示可能行不通。
Thanks.
谢谢。
回答by VisioN
Here is the simpliest solution.
这是最简单的解决方案。
HTML:
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:
CSS：
div {
position: absolute;
display: none;
...
}?
JavaScript:
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/
?演示：http : //jsfiddle.net/8UkHn/
回答by Kshitij
Have you considered using a "title" attribute in this case?
在这种情况下，您是否考虑过使用“title”属性？
<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.
它的作用是，当您将鼠标移到链接“foo”上时，鼠标指针旁边会出现一个包含“foo 表示 foo”的小框。
