jQuery工具提示的建议

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

   Here is the tooltip content.  Here is the link to somewhere.  

我希望的行为是将鼠标hover在“这里是某个地方的链接”上,并弹出一个工具提示,显示包含“https://stackoverflow.com/questions/543277/recommendations-for-jquery-tooltips/someimage.jpg”和“这是工具提示内容”的范围内容。

我更喜欢工具提示跟踪鼠标在链接上的移动以及工具提示的外观(背景颜色,不透明度,边框颜色等)是可配置的。

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

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

OHHHHHHHH最好的一个!

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

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

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

编辑:我看到你提到乔恩(我不知道他的名字),但寻找“雅虎”的例子,它应该做你想要的。

告诉你真实的,我试了几个,但我坚持一个我真正喜欢的:

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

有很多东西你可以改变,它们看起来很棒! 🙂

alt text http://www.balexandre.com/temp/StackOverflow_jquerySimpleTip.png

更新

正如pbz所说,这不再适用于版权问题,但同样可以在’原始’开发人员处找到

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

我是BeautyTips

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

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

    Here is the tooltip content.  Here is the link to somewhere.  

编辑

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

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

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

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

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

q提示 – 毫无疑问

在这里也看到了

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

只需最好的http://flowplayer.org/tools/tooltip/index.html

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

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

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

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

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

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

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

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

工作正常,易于定制。

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

截图

NewTip – >

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

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

试试看 :

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

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