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”的弹出框应该出现在鼠标光标旁边。同样的事情适用于“酒吧”。

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

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

感谢。

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

DEMO： http://jsfiddle.net/8UkHn/

Answer 2

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

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

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

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

Answer 3

使用类似funkytooltips的内容。

但是还有很多其他人;搜索诸如“jquery link popup”之类的东西会更多。

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

3 个答案: