jQuery轻量级工具提示脚本推荐[关闭]

Posted 2023-05-08

【中文标题】jQuery轻量级工具提示脚本推荐[关闭]

【英文标题】：jQuery lightweight tooltip script recommendation [closed]

【发布时间】：2011-01-02 11:17:20

【问题描述】：

我正在寻找一个用于工具提示的轻量级 jQuery 脚本，它是轻量级的，可以轻松地与图像映射一起使用...理想情况下，它会自动将每个区域标签的“标题”用作工具提示。这是一个问题的原因是我有数百个区域（它是一张世界地图），并且每个工具提示的一行代码很快就会增加文件大小。

qTip 可以做到这一点……但它的 38kb……甚至超过了 jQuery 本身。有什么建议吗？

【参考方案1】：

不确定它是否正是您想要的，但请查看 Tipsy：http://onehackoranother.com/projects/jquery/tipsy/

9 KB 未压缩 4 KB 缩小

【讨论】：

我真的很喜欢这个的外观......而且它的重量很轻

【参考方案2】：

vTip 可能是一个不错的候选者（请参阅demo）。它有点过时了，但它非常简单，应该可以工作。

您只需通过在其上添加 class="vtip" 来标记您的 DOM 元素，例如

<a href="#" title="Tooltip content" class="vtip">Tooltip test</a>

未压缩的JS文件只有4KB。

如果您想以更动态的方式处理工具提示，请考虑creating your own simple tooltips。

【参考方案3】：

我使用了富有想象力的标题“jQuery Tooltip”：demo here。适用于图像映射，并且易于使用 CSS 进行自定义。

（巧合的是，我尝试了带有图像映射的 qTip，在与Map Hilight 插件结合使用时发现了一个奇怪的错误）。

【讨论】：

呼...我也在使用地图 Hilight 插件：D...你可能为我节省了很多时间

@Mark：如果你有兴趣，这就是我用它构建的——simpsoncrazy.com/characters/poster

【参考方案4】：

电源提示

http://stevenbenner.github.io/jquery-powertip/

PowerTip 的设计非常灵活，易于定制

支持静态工具提示以及跟随鼠标的工具提示 能够让用户将鼠标悬停在工具提示上并与其内容进行交互 鼠标跟随工具提示仅限于浏览器视口 轻量级 JS ~10KB，CSS ~2KB

---

醉醺醺

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

它被 Twitter、Github、Slideshare 和 Bitbucket 等使用。

轻量级 JS ~10KB，CSS ~2KB

【讨论】：

感谢更新这个 3 年的老问题，powertip 是我需要的 :)

醉醺醺的链接死了。

【参考方案5】：

经过大量研究，这个问题的答案都没有让我满意。

我需要一个轻量级的解决方案，而不是像 Tipsy 那样放弃软件（几年前的最后一次更新，修复了作者忽略的 63 个错误拉取请求），我可以使用典型的工具提示作为表单字段的提示悬停时，也可用于表单提交后的动态字段验证。

如前所述的 PowerTip 确实不错，但它存在一个大问题：一次只能显示一个工具提示。对我来说，这是取消资格，我检查了资源，这是作者的基本假设 - 一次只有一个工具提示，所有工具提示都有一个 DOM 对象等。

工具提示器

又浪费了一个小时后，我找到了正是我需要的解决方案：Tooltipster。它非常容易实现（非常类似于 PowerTip），但它允许您一次准备和显示许多工具提示。另一个优点是根本不使用图像，它只有 js (~12k) 和 css。

希望这可以为某人节省大量研究时间。

【讨论】：

虽然 Tooltipster 看起来不错，但它绝对不是轻量级的，缩小版仅包含 30kb 的主要 javascript 文件。