Twitter Bootstrap/Twipsy

Question

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

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

如您所见,使用文档规定的默认设置,当您将鼠标悬停在工具倾斜的锚点上时会显示工具提示,但当您将鼠标移开时它不会消失.

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

这是脚本的链接: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大干快上的工具提示的隐藏功能去掉使其不可见(opacity=0).

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

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

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

链接到这里:http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/