有用的工具提示教程和 jQuery 插件

已发表: 2010-03-15

工具提示是一种常见的图形用户界面元素。 它与光标结合使用，通常是鼠标指针。 用户将光标悬停在一个项目上，而不单击它，并且可能会出现一个工具提示——一个小的“悬停框”，其中包含有关悬停在该项目上的信息。

我已经为 Tooltips 编译了一些教程和 jQuery 插件。

1. TinyTips - 用于工具提示的轻量级 jQuery 插件

jQuery-Plugin-TinyTips

TinyTips 是一个非常轻量级的 jQuery 插件，它可以为页面上的几乎任何元素添加工具提示。 彻底记录和设计师友好。

2. 使用 jQuery 进行 Flickr 风格的照片标记

Flickr-Style-Photo-Tagging-

jQuery Photo Tagger 大约有 1,000 行代码。 因此，您可以查看项目页面或亲自尝试在线演示。 请注意，单击鼠标创建热点时必须按住 CTRL 键。

演示 | 下载

3. TipTip 自定义工具提示 jQuery 插件与零图像

TipTip-Tooltip-jQuery-Plugi

TipTip 使用 title 属性，就像本机浏览器工具提示一样。 但是，当使用 TipTip 时，标题将被复制然后从元素中删除，这样浏览器工具提示将不会显示。
TipTip 总共只生成一组弹出元素，而不是为每个应用了 TipTip 的元素生成一组弹出元素。 这有助于加快处理速度并减少处理时间。 生成的元素都是 div 元素，并附加到 body 元素的末尾。

4. 如何使用 CSS3 构建新的视觉注释

Visual-Annotations-with-CSS

ZURB 教会了我们如何构建新的视觉注释。 该解决方案在技术上并不太复杂。 在 Notable 中，他们接受了优雅降级的概念：他们利用新的 CSS 技术可以干净地降级到旧浏览器。

演示

5. 使用 Pluralink 将链接显示为下拉列表

Drop-Down-List-with-Plurali

Pluralink 是一个很棒的 javascript 插件，可以在你的文本中排列多个链接。

6. CSS & jQuery 的灰度悬停效果

Greyscale-Hover-Effect-with

带有 CSS 和 jQuery 的灰度悬停效果依赖于 CSS Sprites 和几行 jQuery，但在实现之前需要做一些准备。 不推荐用于大型项目，可能最适合展示作品集。

7. 使用 AnyZoomer jQuery 插件仔细观察

AnythingZoomer-jQuery-Plugi

你有一个小区域。 你把鼠标悬停在它上面。 会弹出一个区域，让您放大查看。 这是一个 jQuery 插件。 我不会告诉您应该将它用于什么或详细说明用例场景。 你自己的创造力可以帮助你。

演示

8. 使用 JSON 和 jQuery 创建内容丰富的工具提示

Create-a-Content-Rich-Toolt

本教程将演示如何使用从 JSON 数组中提取的信息构建由 jQuery 提供支持的工具提示。

演示

9. 用 Pretty (mb)Tooltip 替换您的默认工具提示

(mb)Tooltip 是一个漂亮的 jQuery 网页工具提示。

下载

10. Captify 显示漂亮的图像标题出现在翻转

Captify 是一个由 Brian Reavis 编写的 jQuery 插件，用于显示在翻转时出现的简单、漂亮的图像标题。 它已经在 Firefox、Chrome、Safari 和糟糕的 Internet Explorer 上进行了测试。 Captify 的灵感来自 ImageCaptions，这是另一个用于显示此类标题的 jQuery 插件。

11. 使用 imgPreview jQuery 插件预览图像

Peter Higgins 创建了 Dojo Zoomer。 它分为3个面板。 通过将鼠标悬停在左侧面板上的图像上，右侧面板会动态显示图像的裁剪部分，以便您可以明确地专注于您感兴趣的主图像部分。

12. GPL下的jQuery Javascript Image Magnifier

JQZoom 是一个建立在流行的 jQuery javascript 框架之上的 javascript 图像放大镜。jQzoom 是一个很棒且非常易于使用的脚本来放大你想要的东西。

13. 使用 jQuery 和 CSS 的简单透明工具提示

Simple-Transparent-Tooltips

CSS 工具提示在现代网页设计中非常流行，并且与流行的看法相反，创建它们真的很容易，尤其是使用所有如此流行的 javascript 框架之一。

演示

14. Magic Toolbox – Javascript 和 Flash 图像缩放工具

Magic-Toolbox

Magic Toolbox 创建了 2 个惊人的 javascript 图像缩放工具（Magic Zoom 和 Magic Magnify）。 Magic Zoom 是一个 JavaScript 缩放工具。 这是以令人难以置信的细节显示图像的最佳方式。

15. Prototip 2 - 轻松创建漂亮的工具提示

Prototip-2

Prototip 允许您使用 Prototype javascript 框架轻松创建简单和复杂的工具提示。

演示

16. 使用 jQuery 最简单的工具提示和图像预览

最简单的工具提示和图像预览是滚动链接或缩略图时出现的类似工具提示的气泡弹出窗口之一。

演示

17. 带有 jQ​​uery 的 Coda 样式弹出气泡工具提示

Coda 是适用于 Mac 的新 Web 开发工具之一——它在设计人员和开发人员中很受欢迎。

18.标记可点击图像区域显示弹出工具提示

Taggify 是一个网络小部件，它允许博客作者和出版商通过添加链接到某些图像的 reqions 的图像工具提示来增强他们的网站。
演示

19. 带有 Javascript 和 CSS 的不起眼的气泡工具提示

Bubble Tooltips 是一种将带有气球形状的精美工具提示（通过一些 CSS 和 javascript）添加到任何网页的简单方法。

演示

20. Prototype 和 Scriptaculous 的淡入淡出工具提示

CoolTips 是一种轻量级、不显眼的 JavaScript 网络浏览器工具提示替换技术。
CoolTips 用于替换传统的网络浏览器工具提示。 工具提示获取标题属性的内容，因此它完全不显眼。 CoolTips 是一个基于 Prototype JS 和 script.aculo.us 框架的 OO 类。

21. Sweet Titles 透明和淡化工具提示

Sweet Titles Fading Tooptips 不是从 NICE Titles 的仿制品，也不是试图改进 Dunstan 的修改尝试。 而且它绝对不是从 Dynamic Drive 中的事件处理程序感染脚本之一中删除的。

演示

22. Prototip 大多数功能 Prototype 的工具提示

Prototip 允许您使用 Prototype javascript 框架轻松创建简单和复杂的工具提示。 如果您还使用 Scriptaculous，您甚至可以为它们添加一些不错的效果。

演示

23. BoxOver DHTML/Javascript 轻量级工具提示

BoxOver 使用 javascript / DHTML 在网站上显示工具提示。 然而，工具提示的实现不需要 DHTML 或 javascript 知识。 通过设置标签的“标题”属性，可以设置许多调整以根据您的需要对其进行自定义。