twitter-bootstrap Twitter Bootstrap / Twipsy
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7631111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap / Twipsy
提问by Andrew
I like the idea of the Twipsy plugin that is bundled as part of Twitter Boostrap, but it doesn't seem to work correctly.
我喜欢作为 Twitter Boostrap 一部分捆绑的 Twipsy 插件的想法，但它似乎无法正常工作。
Here's a jsfiddle: http://jsfiddle.net/burlesona/DUPyR/
这是一个 jsfiddle：http: //jsfiddle.net/burlesona/DUPyR/
As you can see, using the default settings as prescribed by the docs, the tooltip appears when you hover over the tool-tipped anchor, but it doesn't go away when you move the mouse away.
如您所见，使用文档规定的默认设置，当您将鼠标悬停在带有工具提示的锚点上时会出现工具提示，但当您将鼠标移开时它不会消失。
I understand that the appearance of the tooltip relies on CSS, but on the Twitter docs page the tooltips are being added and removed from the DOM by the script, whereas in this example and in my own local tests the script adds the tip but never removes it.
我知道工具提示的外观依赖于 CSS，但在 Twitter 文档页面上，脚本正在从 DOM 添加和删除工具提示，而在本示例和我自己的本地测试中，脚本添加了提示但从未删除它。
Here's a link to the script: http://twitter.github.com/bootstrap/1.3.0/bootstrap-twipsy.js
这是脚本的链接：http: //twitter.github.com/bootstrap/1.3.0/bootstrap-twipsy.js
Any ideas / suggestions? I'm pretty confused as to why this is behaving as it is.
任何想法/建议？我很困惑为什么会这样。
Alternatively if anyone has a better suggestion for a clean, lightweight jQuery tooltip plugin, please let me know.
或者，如果有人对干净、轻量级的 jQuery 工具提示插件有更好的建议，请告诉我。
Thanks!
谢谢！
回答by naveen
As you have noted, your code is not working because you have not added the CSS file to your resources.
正如您所指出的，您的代码无法正常工作，因为您尚未将 CSS 文件添加到您的资源中。
Working example: http://jsfiddle.net/DUPyR/1/
工作示例：http: //jsfiddle.net/DUPyR/1/
Because in that CSS file there are two classes called
因为在那个 CSS 文件中有两个类叫做
.fade {
-moz-transition: opacity 0.15s linear 0s;
opacity: 0;
}
.fade.in {
opacity: 1;
}
When you move mouse in, the Tool-tip gets prepended to body and it gets class="twipsy fade in"The ingets removed on the hide function of the tool-tip making it invisible (opacity=0).
当您移动鼠标时，工具提示被预先考虑到身体和它得到class="twipsy fade in"的in大干快上的工具提示的隐藏功能去掉使其不可见（opacity=0）。
Working example with minimal CSS: http://jsfiddle.net/DUPyR/3/
使用最少 CSS 的工作示例：http: //jsfiddle.net/DUPyR/3/
Please note that its not removing the element from DOM as in the original example. More investigation of the CSS will surely shed some light there.
请注意，它不会像原始示例中那样从 DOM 中删除元素。对 CSS 的更多调查肯定会在那里有所启发。
If you ask me my favorite tool-tip plugin, I use J?rn Zaefferer's lightweight tooltip plugin (4kb compressed). It suits my purpose well.
如果你问我最喜欢的工具提示插件，我使用 J?rn Zaefferer 的轻量级工具提示插件（4kb 压缩）。它很适合我的目的。
Link here: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
链接在这里：http: //bassistance.de/jquery-plugins/jquery-plugin-tooltip/
回答by zengr
I am not sure why twipsy is not working, but tipsyworks: http://jsfiddle.net/X6H2Y/
我不知道为什么托普西不工作，但喝醉的作品：http://jsfiddle.net/X6H2Y/
Tipsy is the original jQuery plugin which was modified by Twitter for these:
Tipsy 是由 Twitter 修改的原始 jQuery 插件：
(Twipsy is) Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!
（Twipsy 是）基于 Jason Frame 编写的优秀的 jQuery.tipsy 插件；twipsy是更新版本，不依赖图片，动画使用css3，标题存储使用data-attributes！
回答by Evan
Or you can use "tooltip" like this:
或者您可以像这样使用“工具提示”：
<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
相对：http: //twitter.github.com/bootstrap/javascript.html#tooltips
回答by Ralph Lavelle
Yeah, it seems to be removed as a separate plugin now (2.3.1 at the time of writing) but there is a ToolTip pluginthat comes with the main bootstrap.js file so that should do you.
是的，它现在似乎作为一个单独的插件被删除（在撰写本文时为 2.3.1），但是有一个ToolTip 插件随主 bootstrap.js 文件一起提供，所以你应该这样做。
