当鼠标悬停在链接上时如何创建弹出框？

Question

这是我想实现的内容：

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

<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链接上时，对应的描述div应该弹出，并且它应该弹出在我的光标所在的位置旁边。

因此，如果我将鼠标悬停在“foo”上，一个包含“foo表示foo”的弹出框应该出现在鼠标光标右侧。对于“bar”同样适用。

请展示一种使用javascript/jquery、CSS或这两者的组合实现这一点的快速简单方法。

附言：我很抱歉之前没有解释清楚，我实际上想在描述div中添加进一步的链接或图像，因此常规的工具提示可能行不通。

谢谢。

- eastboundr

---

为什么不使用已有的众多工具提示插件呢？ - j08691

对于我之前的解释不够清楚，我想在描述区域添加更多的链接或图片而不是纯文本。因此，我认为常规的工具提示并不能满足我的需求。 - eastboundr

我认为qTip2可能符合您的需求。 - Neysor

Answer 1

这是最简单的解决方案。

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>

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

- VisioN

---

太棒了~这正是我想要的，简单、干净，没有第三方插件...非常好用，谢谢!! - eastboundr

Answer 2

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

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

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

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

- Kshitij

---

谢谢，但实际上我想在描述区域中添加更多的链接或图像，而不是纯文本。抱歉没有解释清楚。 - eastboundr