4

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

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

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

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

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

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

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

谢谢！

4

4 回答 4

15

正如您所指出的，您的代码无法正常工作，因为您尚未将 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/

于 2011-10-03T06:18:16.180 回答
0

我不知道为什么 twipsy 不工作，但小费工作：http : //jsfiddle.net/X6H2Y/

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

（Twipsy 是）基于 Jason Frame 编写的优秀的 jQuery.tipsy 插件；twipsy 是一个更新版本，它不依赖图像，使用 css3 进行动画，使用 data-attributes 存储标题！

于 2011-10-03T05:52:57.310 回答
0

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

<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>

相关：http : //twitter.github.com/bootstrap/javascript.html#tooltips

于 2013-03-06T08:21:46.673 回答
0

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

于 2013-04-03T03:03:49.543 回答