Twitter Bootstrap / Twipsy

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工具提示插件，请告诉我。

谢谢！

- Andrew

Answer 1

正如你所提到的，你的代码没有工作是因为你没有将CSS文件添加到你的资源中。

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

因为在那个CSS文件中有两个叫做的类

.fade {
    -moz-transition: opacity 0.15s linear 0s;
    opacity: 0;
}
.fade.in {
    opacity: 1;
}

当您将鼠标移动到上面时，工具提示会被添加到body并获得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/

- naveen

---

是的，我在使用弹出框时遇到了问题，但是这篇文章帮助我意识到我必须包含“bootstrap.css”（或至少其中的一部分）。我想只有像我这样只想使用Bootstrap的一个功能的人更容易遇到这个问题。 - D.Tate

Answer 2

是的，在撰写本文时（2.3.1），它似乎已被作为单独的插件移除，但是主要的bootstrap.js文件中附带了ToolTip插件，所以那应该可以满足您的需求。

- Ralph Lavelle

Answer 3

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

Tipsy 是最初的 jQuery 插件，被 Twitter 修改了：

(Twipsy 是) 基于 Jason Frame 编写的优秀 jQuery.tipsy 插件； twipsy 是一个更新的版本，它不依赖图片，使用 CSS3 实现动画并使用数据属性来存储标题！

- zengr

Answer 4

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

<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

- Evan