jQuery轻量级tooltip脚本推荐

发布于 2024-08-17 05:58:40 字数 1491 浏览 4 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

拥抱我好吗 2024-08-24 05:58:40

不确定这是否正是您正在寻找的内容,但请查看 Tipsy:
http://onehackoranother.com/projects/jquery/tipsy/

9 KB 未压缩
缩小至 4 KB

Not sure if it's exactly what you're looking for but check out Tipsy:
http://onehackoranother.com/projects/jquery/tipsy/

9 KB uncompressed
4 KB minified

情未る 2024-08-24 05:58:40

vTip 可能是一个不错的选择(请参阅< a href="http://www.htmldrive.net/items/demo/819/very-lightweight-tooltips-vTip" rel="nofollow">演示)。它有点过时了,但是非常简单并且应该可以工作。

你只需在 DOM 元素上添加 class="vtip" 来标记它,例如

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

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

如果您想以更动态的方式处理工具提示,请考虑 创建您自己的简单工具提示

vTip might be a good candidate (see demo). It's a bit outdated, but it's dead simple and should work.

You just mark your DOM element by adding class="vtip" on it, e.g.

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

Uncompressed JS file is only 4KB.

If you want to handle your tooltips in more dynamic way, consider creating your own simple tooltips.

幸福不弃 2024-08-24 05:58:40

我使用富有想象力的标题为“jQuery Tooltip”:此处演示。与图像映射配合良好,并且易于使用 CSS 进行自定义。

(巧合的是,我尝试使用图像地图使用 qTip,并在与 地图高亮 结合使用时发现了一个奇怪的错误插件)。

I use the imaginatively-titled "jQuery Tooltip": demo here. Works well with image maps, and is easy to customize with CSS.

(Coincidentally, I tried qTip with image maps and found a weird bug when combined with the Map Hilight plugin).

剧终人散尽 2024-08-24 05:58:40

PowerTip

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

PowerTip 具有非常灵活的功能易于定制的设计

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

Tipsy

< a href="http://onehackoranother.com/projects/jquery/tipsy/" rel="nofollow">http://onehackoranother.com/projects/jquery/tipsy/

它被 Twitter、Github、 Slideshare 和 Bitbucket 等。

  • 轻量级 JS ~10KB,CSS ~2KB

PowerTip

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

PowerTip features a very flexible design that is easy to customize

  • Supports static tooltips as well as tooltips that follow the mouse
  • Ability to let users mouse on to the tooltips and interact with their content
  • Mouse follow tooltips are constrained to the browser viewport
  • Lightweight JS ~10KB, CSS ~2KB

Tipsy

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

It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.

  • Lightweight JS ~10KB, CSS ~2KB
白云不回头 2024-08-24 05:58:40

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

我需要一个轻量级的解决方案,而不是像Tipsy那样的废弃软件(上次更新几年前,作者忽略了63个错误修复拉取请求),并且我可以使用典型的工具提示作为悬停时表单字段的提示,而且还可以在表单提交后进行动态字段验证。

正如前面提到的 PowerTip 确实很好,但它有一个大问题:一次只能显示一个工具提示。对我来说这是不合格的,我检查了资源,这是作者的基本假设 - 一次只有一个工具提示,所有工具提示都有一个 DOM 对象等。

Tooltipster

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

希望这能为某人节省大量的研究时间。

After big research none of answers to this question gave me satisfaction.

I needed one solution that is lightweight, is not abandonware as Tipsy (last update years ago, 63 bug fixing pull requests ignored by author) and I can use as typical tooltip as hint for form fields on hover, but also for dynamic field validation after form submit.

Really good one is as mentioned earlier PowerTip, but there is big issue with it: you can only have one tooltip visible at once. For me it's disqualification, I checked resources and this is basic assumption of author - only one tooltip at once, there is one single DOM object for all tooltips etc.

Tooltipster

After loosing another hour I found solution that is exactly what I needed: Tooltipster. It's really easy to implement (very similar to PowerTip) but it allows you to prepare and show many tooltips at once. Another advantage is fact of not using images at all, it's only js (~12k) and css.

Hope this will save many hours of research to someone.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文