Question

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

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

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

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

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

任何想法/建议？我很困惑为什么这样做会如此。

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

谢谢！

Answer 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，使其不可见（{{1} }）。

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

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

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

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

Answer 2

我不确定为什么twipsy无效，但tipsy有效：http://jsfiddle.net/X6H2Y/

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

（Twipsy is）基于Jason Frame编写的优秀jQuery.tipsy插件; twipsy是一个更新版本，它不依赖于图像，使用css3 用于动画和标题存储的数据属性！

Answer 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

Answer 4

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

Twitter Bootstrap / Twipsy

4 个答案: