我在寻找一个智能的JavaScript或jQuery工具提示弹出窗口

Question

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

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

有什么建议或推荐吗？也许是jquery？

- Lupo

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 做了一点，但没有考虑滚动条或垂直定位。这可能或可能不是对您有影响。如果是，一个好的插件应该会为您完成所有这些工作。

- gilly3

Answer 2

使用纯CSS，可能会有用的是Hint.css。

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

- blessanm86

---

作为一个单一的 ~4800 字节文件（最小化），这是一个很好的纯 CSS 解决方案，非常容易使用。编辑答案以包括一个示例。 - Stéphane

Answer 3

你可以尝试使用qtip- http://craigsworks.com/projects/qtip/

- ipr101

---

qtip非常好用。它允许自定义样式/动画，并内置逻辑以确保工具提示不会放置在屏幕外。 - Alex Jillard

Answer 4

我编写了一个基于jQuery的新模块，因为我想要Twitter很好的工具提示。但是他们的工具提示太简单了，没有进入或退出动画。它的API在实际编程环境中使用起来有点毫无用处。即使如此，我也发现有时候它会出现故障。 所以我写了自己的工具提示副本（从头开始！我甚至没有看过他们的代码），并增加了一些好处。转到www.matooltip.com，查看主页底部的高级示例（单击名称为“代码行”的链接）。为了满足您所有预期的目的，您必须成为强大的用户，并接管内容管理并设置自己的事件处理程序，就像我在那个特定示例中所做的那样。尽管如此，该模块对您来说将非常轻松。工具提示的定位和所有显示逻辑都已内置！我希望补充网站上有您需要的所有答案，否则请随时与我联系，我会帮助您。如果您愿意并且符合我对该模块的整体设计目标，我甚至可以编写一个新版本并实现一些新功能。

- Martin Andersson

Answer 5

我相信这个不错的jQuery插件会为你解决问题

Coda Popup Bubbles

- c0deNinja