Twitter Bootstrap / Twipsy

Posted 2023-05-08

【中文标题】Twitter Bootstrap / Twipsy

【英文标题】：

【发布时间】：2011-11-29 16:11:14

【问题描述】：

我喜欢作为 Twitter Boostrap 的一部分捆绑的 Twipsy 插件的想法，但它似乎无法正常工作。

这是一个 jsfiddle：http://jsfiddle.net/burlesona/DUPyR/

如您所见，使用文档规定的默认设置，当您将鼠标悬停在带有工具提示的锚点上时会出现工具提示，但当您将鼠标移开时它不会消失。

我知道工具提示的外观依赖于 CSS，但在 Twitter 文档页面上，工具提示是由脚本从 DOM 中添加和删除的，而在本示例和我自己的本地测试中，脚本添加了提示但从不删除它。

这是脚本的链接：http://twitter.github.com/bootstrap/1.3.0/bootstrap-twipsy.js

有什么想法/建议吗？我很困惑为什么会这样。

或者，如果有人对干净、轻量级的 jQuery 工具提示插件有更好的建议，请告诉我。

谢谢！

【参考方案1】：

正如您所指出的，您的代码无法正常工作，因为您尚未将 CSS 文件添加到资源中。

工作示例：http://jsfiddle.net/DUPyR/1/

因为在那个 CSS 文件中有两个类被调用

.fade 
    -moz-transition: opacity 0.15s linear 0s;
    opacity: 0;

.fade.in 
    opacity: 1;

当您将鼠标移入时，工具提示会添加到正文中，并且会被添加到 class="twipsy fade in" in 会在工具提示的隐藏功能上被删除，使其不可见 (opacity=0)。

使用最少 CSS 的工作示例：http://jsfiddle.net/DUPyR/3/

请注意，它不会像原始示例中那样从 DOM 中删除元素。对 CSS 的更多研究肯定会在这方面有所启发。

如果你问我最喜欢的工具提示插件，我会使用 Jörn Zaefferer 的轻量级工具提示插件（4kb 压缩）。这很适合我的目的。

链接：http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

【讨论】：

是的，我无法让弹出框工作，但这篇文章帮助我意识到我必须包含“bootstrap.css”（或至少部分）。我想只有像我这样只想使用 bootstrap 的一个功能的人更有可能遇到这个问题。

【参考方案2】：

我不确定为什么 twipsy 不工作，但 tipsy 工作：http://jsfiddle.net/X6H2Y/

Tipsy 是由 Twitter 修改的原始 jQuery 插件：

（Twipsy 是）基于 Jason Frame 编写的优秀的 jQuery.tipsy 插件； twipsy是更新版本，不依赖图片，使用css3 用于动画，以及用于标题存储的数据属性！

【参考方案3】：

或者你可以像这样使用“工具提示”：

<div rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" data-original-title="hi">I'm here</div>

<script type='text/javascript'> $(window).load(function() $('div[rel=tooltip]').tooltip(); );</script>

rel:http://twitter.github.com/bootstrap/javascript.html#tooltips

【参考方案4】：

是的，它现在似乎已作为一个单独的插件被删除（在撰写本文时为 2.3.1），但主 bootstrap.js 文件附带了一个 ToolTip plugin，所以你应该这样做。