为开发者准备的 15 款 Tooltip 工具提示 jQuery 插件 已翻译 100%

oschina 投递于 2013/07/05 07:36 (共 9 段, 翻译完成于 07-05)
阅读 16202
收藏 243
6
加载中
joyride-jquery-plugin

tooltip或者infotip或者hint,是一种常见的图形用户界面元素。它用于连同一个光标,通常是一个鼠标光标。当用户将鼠标悬停在一个特定的地方,无需点击,就会出现一个包含关于悬停到这个地方的一些信息的tooltip或小的悬浮框。

jQuery tooltip是应该考虑在网页设计和开发中利用的最好的构件之一。Tooltip提供了额外的功能和通用型,可以被视为大多数网站的最重要的一个用户界面组件

本文中我收集了15个最好的jquery tooltip插件,这些可以帮助你创建创新的和有创造性的网页设计,同时也可以帮助你来实现你的web项目所需要的结果。我希望这个jquery tooltip插件的列表对你即将到来或已经开始的web项目提供了便利并且是确实有用的。如果你知道一些其他的jquery tooltip插件请通过在评论区跟帖让我知道,非常期待。请享受本文!

小天
小天
翻译于 2013/07/05 14:15
1

1. Tooltipster

Tooltipster
Tooltipster是一个jQuery插件,用来快速创建HTML5验证的灵活的提示工具。这个插件很小(4.8kb大小),工作很快并且可以很容易的被定制。外观可以随意改变CSS(支持主题)和鼠标箭头的位置,展现的延迟/时间都可以被定义。

Source

2. Toolbar.js

toolbar-js
Toolbar.js允许你快速创建用于web应用程序和网站的提供工具类型的工具栏。这个工具栏可以很容易的用twitter启动图标定制,还提供自适应的环绕在工具栏周围显示一些图标。

Source
小天
小天
翻译于 2013/07/05 11:08
1

3.qTip2

qtip2
qTip2是第二代先进的qTip插件,这是一个曾经很流行的jQuery框架。在1.0版本的友好的用户和丰富的功能的基础上,qTip2提供了一些增强的功能,比如气泡提示、影像映射等等。它是完全免费的,许可是MIT/GPLv2。

Source

4. Poshy Tip jQuery Plugin

poshy-tip
Poshy Tip jQuery Plugin是一个提示框插件,允许轻松创建时尚的提示。通过Poshy Tip你可以把提示相对于鼠标光标或目标元素来定位,并可以将它们横向或纵向展示。

Source
小天
小天
翻译于 2013/07/05 11:19
1

5. Grumble.js

grumblejs
Grumble.js提供了一个没有东西南北定位限制的特殊的提示。它可以从360度的任何角度环绕一个给定的元素,可以指定任意的距离。

Source

6. Joyride

joyride-jquery-plugin
Joyride是一个jQuery的插件,简化了指导用户发现一个网站的特点的过程。通过定义一个有序的步骤,可以在任何HTML元素附近通过提示显示需要的信息。

Source
小天
小天
翻译于 2013/07/05 11:25
1

7. ImageMapster

ImageMapster
ImageMapster是一个可以通过添加更多地功能给旧图片来让它们更有生气的jQuery插件。使用这个插件,可以通过各种方式突出显示、选择(单个或多个区域)和操纵任何的图像。提示工具可以显示用户友好的可以与该图像互动的信息。

Source

8. Tooltipsy

tooltipsy
Tooltipsy是一个提供了创建提示工具的灵活基础的jQuery插件。它有最小的默认样式或动画,你都可以完全控制它们。它可以按你希望的方式来定位,外观和感觉均可以通过CSS来定制,任何类型的动画都可以被实现。

Source
小天
小天
翻译于 2013/07/05 11:34
1

9. jQuery Bubble Popup

jquery bubble popup
jQuery Bubble Popup是一个用来帮助创建容易控制的别致Tooltip的最流行的JS框架的插件。Tooltip通过淡入淡出的方式显示/隐藏,里面也可以显示任何的HTML内容。它们可以附加到任何一边的一个元素中,也可以获取Tooltip的状态(开/关,创建,最后一次修改或最后一次显示的时期时间)而采取相应的动作。

Source

10. Beauty Tips

beauty-tip-demo
BeautyTips是一个使用canvas元素来实时绘制Tooltip的jQuery插件。每一个Tooltip默认显示在一个元素的有足够空间的一边,但是这个位置也可以强制放到一边。内容可以硬编码进去,或者从一个属性获取或者通过一次Ajax请求获取。

Source
小天
小天
翻译于 2013/07/05 13:30
1

11. Simpletip

simpletip
Simpletip是一个新生的轻量级的创建灵活的Tooltip的jQuery插件。Tooltip可以附加到任何的元素 & 轻松风格的演示 & 定位。Tooltip可以是静态的、动态的或者通过Ajax加载的。另外,可以应用任何组合的效果来使它们更有吸引力。

Source

12. Colortip

colortip
它将在你页面中元素的title属性转换为一系列丰富多彩的Tooltip。共有六个可用的颜色主题,所以你可以很容易的匹配你的设计。你也可以轻松地通过添加三个额外的样式类到你的stylesheet和在colortip-1.0-jquery.js中的支持颜色数组中添加一个元素来创建你自己的Tooltip

Source
小天
小天
翻译于 2013/07/05 13:40
1

13.TipTip

tiptip
TipTip是一个非常轻量级和智能的自定义Tooltip的jQuery插件。它使用零图像,并且是通过CSS完全可定制的。TipTip会检测浏览器窗口的边缘以确保tooltip停留在当前窗口的大小。因此Tooltip将调整自身来显示在要使用TipTip的元素的上下左右,这取决于要保持在浏览器窗口中的哪些是必要的。

Source

14. (Mb) Tooltip

mb-tooltip
(mb)Tooltip是为你的使用jQuery的页面提供的一个美丽的tooltip。只需很简单的将你的内容作为title属性的值,然后你就可以用这个聪明的漂亮的tooltip代替那丑陋的默认tooltip了。你也可以随时禁用或启用(mb)Tooltip。

Source
小天
小天
翻译于 2013/07/05 13:52
1

15. Hovercard

hovercard
这是一个免费的轻量级jQuery插件,可以让你使用悬停的label、link或任何你选择的html元素来显示相关联的信息。hovercard可以用在显示个人简历、书籍作者和价格,通过Ajax加载相关联的信息,直接编辑等场景下。你也可以添加你的自定义数据源,使用已有的card格式来显示分析的数据。

Source
小天
小天
翻译于 2013/07/05 13:59
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(11)

coderlu
coderlu
马克!
子弹兄
子弹兄
很好很好!!
谢了
收藏着
xiaobao36
xiaobao36
好东西,感谢分享,
jinceon
jinceon
hint.css
苏生不惑
苏生不惑
这么多,选哪个好呢
灰花走湿
灰花走湿
插件层出不穷
java9
java9
mark
开源内裤
开源内裤
mark
d
danceshow
mark
返回顶部
顶部