我正在寻找javascript或jquery中的智能工具提示弹出窗口

Question

我正在寻找工具提示弹出窗口，该弹出窗口会附加到我网站上的某些链接中。

• 当用户鼠标悬停时，工具提示弹出窗口应该淡入。
• 当用户在其中导航时，工具提示弹出窗口应保持活动状态。
• 工具提示应根据其位置弹出到顶部/底部或侧面（例如，如果顶部没有足够的空间，则弹出到底部）

对此类事情的任何想法或建议？也许是jquery？

Answer 1

诀窍在于CSS，而不是JavaScript。首先以静态HTML的形式创建弹出窗口，使其在活动时以您希望的方式显示。然后隐藏它并在jQuery中使用.fadeIn()。

我会尝试这样的事情：

<a href="foo.htm" class="tooltip">
    Foo
    <div>Tooltip content</div>
</a>

CSS：

a.tooltip {
    position: relative;
}
a.tooltip > div {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -150px;
    width: 300px;
}

JavaScript的：

$("a.tooltip").hover(function () {
    $("> div", this).fadeIn();
},
function () {
    $("> div", this).fadeOut();
});

修改：这是一个演示：http://jsfiddle.net/gilly3/b3PjW/。我收回有关JavaScript不是一个棘手的部分。考虑屏幕边缘的链接意味着充足的定位逻辑。我的jsfiddle做了一点，但没有考虑滚动条或垂直定位。这对您来说可能是也可能不是问题。如果是，一个好的插件应该为你完成所有这些。

Answer 2

使用纯CSS。 Hint.css可能有用。

<p class="hint--bounce" class="hint--rounded" data-hint="Popup text!">blah</p>

Answer 3

您可以尝试qtip -

http://craigsworks.com/projects/qtip/

Answer 4

我写了一个新的基于jQuery的模块'因为我想要Twitter's nice tooltip。但他们的工具提示过于简单，没有移入或移出动画。 API在真正的程序化环境中使用是没有价值的。即便如此，我也发现它有时会出现问题。 所以我写了他自己的工具提示副本（从头开始！我甚至没有查看他们的代码。）带来一些额外的好处。转到www.matooltip.com，并在主页底部看到的高级示例中查看（单击显示“代码行”的链接）。为了满足您的所有预期目的，您必须成为超级用户并接管内容管理并设置您自己的事件处理程序，就像我在该特定示例中所做的那样。尽管如此，该模块对您来说仍然是一件轻而易举的事。内置工具提示和所有显示逻辑！我希望补充网站有你需要的所有答案，请随时与我联系，我会帮助你。如果您愿意，我甚至可以编写新版本并实现一些新功能，如果它们符合我对该模块的总体设计目标。

Answer 5

我相信这个漂亮的jQuery插件会为你做到这一点

Coda Popup Bubbles