jquery - 对 jQuery 工具提示的建议

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”和“这里是工具提示内容”的跨度内容。

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

我发现的两个最受欢迎的工具提示“clueTip”和 Jörn Zaefferer 的“工具提示”似乎不符合要求，除非我遗漏了什么。

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

score 18 · Accepted Answer

OHHHHHHHH 有史以来最好的！

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

演示：（查找“链接到雅虎”示例以满足您的所有需求）

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

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

score 8 · Accepted Answer

telling you the true, I tried a couple of them but I'm sticking with one that I really like:

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

there are plenty of things you can change and they look fantastic Anywhere! :)

_{(source: balexandre.com)}

Updated

As pbz said, this is no longer available for copyright infrangiments, but the same can be found in the 'original' developer at

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

score 5 · Accepted Answer

5

我是一个超级粉丝BeautyTips

于 2009-02-12T21:17:23.493 回答

score 4 · Accepted Answer

它必须是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>

编辑

阅读我每天的博客剂量这篇文章引起了我的注意。他们创建了一个 jquery 插件，可以做你想做的事，弹出一个带有样式选项和鼠标移动的图像。在这里查看结果。

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

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

score 2 · Accepted Answer

这应该可以让您在工具提示框中放置您想要的任何内容。
http://code.google.com/p/next-msg/

另外它有主题 在此处输入图像描述

score 2 · Accepted Answer

2

qTip - 毫无疑问

也看这里

于 2011-09-29T19:59:10.360 回答

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

1

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

于 2011-02-04T15:24:53.940 回答

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

这： http: //onehackoranother.com/projects/jquery/tipsy/

其他推荐的可能更适合您的需求

score 0 · Accepted Answer

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

score 0 · Accepted Answer

新提示 -->

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

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

试试看：

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

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

score 0 · Accepted Answer

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

工作正常，易于定制。

score 0 · Accepted Answer

我还为工具提示构建了一个 jQuery 插件- 它非常小 - 缩小了 5KB，非常易于设置和使用，并且有很多配置选项；无论垂直/水平滚动或窗口大小如何，它都会将提示定位在视口内；宽度和背景颜色可以在初始化时更改。它不使用任何图像——它对所有花哨的东西都使用 CSS，并为旧浏览器优雅地降级。它甚至可以在 IE6 中工作 :) 而且，默认情况下，它看起来像这样：

jquery - 对 jQuery 工具提示的建议

15 回答 15

Related

Reference