Question

我正在寻找jQuery的工具提示插件，它允许以下类型的行为。

<a href="somewhere.html">
 <span>
  <img src="someimage.jpg" style="display: none;" />
  Here is the tooltip content.
 </span>
 Here is the link to somewhere.
</a>

我希望的行为是将鼠标悬停在“这是指向某处的链接”上，并弹出一个工具提示，显示包含“someimage.jpg”和“这是工具提示内容”的范围内容。 / p>

我希望工具提示跟踪鼠标在链接上的移动以及工具提示的外观（背景颜色，不透明度，边框颜色等）是可配置的。

我发现的两个最受欢迎的工具提示，“clueTip”和JörnZaefferer的“工具提示”似乎不符合要求，除非我遗漏了一些东西。

最终，链接和图像将动态生成。

Answer 1

OHHHHHHHH最好的一次！

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

演示:(寻找“链接到雅虎”示例以满足您的所有需求）

http://jquery.bassistance.de/tooltip/demo/

编辑：我看到你提到了乔恩（我不知道他的名字），但寻找它应该做你想做的“雅虎”例子。

Answer 2

告诉你真实的，我尝试了几个，但我坚持一个我真正喜欢的：

http://craigsworks.com/simpletip/sandbox/

你可以改变很多东西，它们看起来很棒！：）

_{（来源：balexandre.com）}

<强> 更新

正如pbz所说，这不再适用于版权问题，但同样可以在“原始”开发者身上找到

http://www.nickstakenburg.com/projects/prototip2/

Answer 3

我是BeautyTips

的粉丝

Answer 4

它必须是jquery吗？如果你愿意的话，你可以用CSS做到这一点。

a.info
{
    position: relative;
    z-index: 24;
}

a.info:hover
{
    z-index: 25;    
}

a.info span
{
    display: none;
}

a.info:hover span
{
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    width: 15em;
    padding: 6px;
    border: 1px solid black;
    background-color: #eeeeee;
    color: #000;
}

然后就可以像使用它一样使用它。

<a href="somewhere.html" class="info">
 <span>
  <img src="images/someImage.jpg" />
  Here is the tooltip content.
 </span>
 Here is the link to somewhere.
</a>

修改

我的注意力是阅读每日博客this article。他们创建了一个jquery插件，可以执行您想要的操作，弹出带有样式选项和鼠标移动的图像。在这里查看结果。

http://james.padolsey.com/demos/imgPreview/full/

您应该能够按照教程编写插件或下载示例插件。

Answer 5

这可以让你把任何你想要的东西放在工具提示框中 http://code.google.com/p/next-msg/

此外还有主题 enter image description here

Answer 6

qTip - 毫无疑问

另见here

Answer 7

您还可以尝试使用名为Likno Web Tooltips Builder的工具： http://www.likno.com/jquery-tooltips/index.php

Answer 8

简直是最好的 http://flowplayer.org/tools/tooltip/index.html

Answer 9

这是一个jQuery工具提示，几乎可以做任何事情，看起来也很棒：

提示：http://projects.nickstakenburg.com/tipped

Answer 10

这是我使用的一个很棒的，它有一个位置和鼠标跟随选项，还带有一堆开箱即用的主题。 http://www.websanova.com/plugins/websanova/tooltip

Answer 11

我想过用这个： http://www.codylindley.com/blogstuff/js/jtip/

并且： http://onehackoranother.com/projects/jquery/tipsy/

推荐的其他人可能会更好地满足您的需求

Answer 12

我推荐ClueTip：http://plugins.learningjquery.com/cluetip/它易于使用，支持工具提示中的换行符（带有可自由配置的分隔符），并且似乎在表格单元格中运行良好（http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/不是这种情况）

Answer 13

jQuery UI现在有一个内置的工具提示模块：http://jqueryui.com/tooltip/

工作正常，易于定制。

Answer 14

我还构建了a jQuery plugin for tooltips - 它非常小 - 缩小了5KB，非常易于设置和使用，并且具有许多配置选项;无论垂直/水平滚动或窗口大小如何，它都会将提示定位在视口内;初始化时可以更改宽度和背景颜色。它没有使用任何图像 - 它使用CSS来处理所有花哨的东西，并且适用于旧版浏览器。它甚至可以在IE6中运行:)并且，默认情况下，它看起来像这样：

Screenshot

Answer 15

NewTip - ＆gt;

      New Tooltip JQuery plugin with support in browsers from IE7+, Firefox, Chrome

非常有吸引力且易于自定义处理回调和任何类型元素的事件。

试一试：

JQuery插件注册表：http://plugins.jquery.com/newtip/

Github主页：https://github.com/chandra7mca/newtip

jQuery工具提示的建议

15 个答案: