Javascript 使用 Twitter Bootstrap 的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10436231/
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
Tooltips with Twitter Bootstrap
提问by schmmd
I am using Twitter Bootstrap--and I am not a frontend developer! However, it's making the process almost--dare I say--fun!
我正在使用 Twitter Bootstrap——而且我不是前端开发人员！然而，它使这个过程几乎——我敢说——有趣！
I'm a bit confused about tooltips. They are covered in the documentationbut Twitter assumes some knowledge. For example, they say to trigger the tooltip with the following JavaScript code.
我对工具提示有点困惑。它们包含在文档中，但 Twitter 假设有一些知识。例如，他们说使用以下 JavaScript 代码触发工具提示。
$('#example').tooltip(options)
After poking around on their source, I realized that fields with tooltips need to be in a class and have the following code run.
在查看他们的源代码后，我意识到带有工具提示的字段需要在一个类中并运行以下代码。
$('.tooltipclass').tooltip(options)
But now my question is, why doesn't Twitter Bootstrap provide such a class tooltip? Just to allow greater configuration? Is it better to add the individual elements with tooltips to tooltipclass, or should I add the surrounding area to tooltipclass? Does it matter if I use a class identifier (.class) instead of a name identifier (#name)?
但现在我的问题是，为什么 Twitter Bootstrap 不提供这样的类tooltip？只是为了允许更大的配置？是将带有工具提示的单个元素添加到tooltipclass，还是应该将周围区域添加到tooltipclass？如果我使用类标识符 ( .class) 而不是名称标识符 ( #name) 有关系吗？
回答by Andres Ilich
I think your question boils down to what proper selector to use when setting up your tooltips, and the answer to that is almost whatever you want. If you want to use a class to trigger your tooltips you can do that, take the following for example:
我认为您的问题归结为在设置工具提示时使用什么合适的选择器，答案几乎是您想要的。如果你想使用一个类来触发你的工具提示，你可以这样做，例如：
<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>
Then you can trigger all links with the .linkclass attached as tooltips like so:
然后，您可以触发所有带有.link作为工具提示附加的类的链接，如下所示：
$('.link').tooltip()
Now, to answer your question as to why the bootstrap developers did not use a class to trigger tooltips that is because it is not needed exactly, you can pretty much use any selectors you want to target your tooltips, such as (my personal favorite) the relattribute. With this attribute you can target all links or elements with the relproperty set to tooltip, like so:
现在，要回答关于引导程序开发人员为什么不使用类来触发工具提示的问题，因为它不是完全需要的，您几乎可以使用任何想要针对工具提示的选择器，例如（我个人最喜欢的）的rel属性。使用此属性，您可以定位rel属性设置为 的所有链接或元素tooltip，如下所示：
$('[rel=tooltip]').tooltip()
And your links would look like something like this:
你的链接看起来像这样：
<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a>
Of course, you can also use a container class or id to target your tooltips inside an specific container that you want to single out with an specific option or to separate from the rest of your content and you can use it like so:
当然，您也可以使用容器类或 id 将您的工具提示定位到您想要使用特定选项挑出或与其余内容分开的特定容器内，您可以像这样使用它：
$('#example').tooltip({
selector: "a[rel=tooltip]"
})
This selector will target all of your tooltips with the relattribute "within" your #examplediv, this way you can add special styles or options to that section alone. In short, you can pretty much use any valid selector to target your tooltips and there is no need to dirty your markup with an extra class to target them.
此选择器将使用rel属性“在”您的#examplediv 中的所有工具提示作为目标，这样您就可以单独向该部分添加特殊样式或选项。简而言之，您几乎可以使用任何有效的选择器来定位您的工具提示，并且无需使用额外的类来弄脏您的标记来定位它们。
回答by M.R.Safari
The easiest way to use this is
最简单的使用方法是
put this in the header:
把它放在标题中：
<script>
$(function ($) {
$("a").tooltip()
});
</script>
and then
进而
<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text">
My link text
</a>
so with that js code if you have tag any where in your page with rel="tooltip"get the bootstrap tooltip.
因此，如果您在页面中的任何位置标记了该 js 代码，则rel="tooltip"获取引导工具提示。
good luck.
祝你好运。
回答by Ryan Ba?aria
Add this into your header
将此添加到您的标题中
<script>
//tooltip
$(function() {
var tooltips = $( "[title]" ).tooltip();
$(document)(function() {
tooltips.tooltip( "open" );
});
});
</script>
Then just add the attribute title="your tooltip"to any element
然后只需将属性添加title="your tooltip"到任何元素
回答by Amged
Simply mark all the data-toggles...
只需标记所有数据切换...
jQuery(function () {
jQuery('[data-toggle=tooltip]').tooltip();
});
回答by Baig
I included the JS and CSS file and was wondering why it is not working, what made it work was when I added the following in <head>:
我包含了 JS 和 CSS 文件，想知道为什么它不起作用，是什么使它起作用是在我添加以下内容时<head>：
<script>
jQuery(function ($) {
$("a").tooltip()
});
</script>
回答by Styxxy
That's because these things (I mean tooltip etc) are jQuery plug-ins. And yes, they assume some basic knowledge about jQuery. I would suggest you to look for at least a basic tutorial about jQuery.
那是因为这些东西（我的意思是工具提示等）是 jQuery 插件。是的，他们假设有一些关于 jQuery 的基本知识。我建议您至少查找有关 jQuery 的基本教程。
You'll always have to define which elements should have a tooltip. And I don't understand why Bootstrap should provide the class, you define those classes or yourself. Maybe you were hoping that bootstrap did automatically some magic? This magic however, can cause a lot of problems as well (unwanted side effects).
您始终必须定义哪些元素应该具有工具提示。我不明白为什么 Bootstrap 应该提供这个类，你定义这些类或者你自己。也许您希望引导程序自动执行一些魔术？然而，这种魔法也会导致很多问题（不需要的副作用）。
This magic can be easily achieved to just write $(".myclass").tooltip(), this line of code does exact what you want. The only thing you have to do is attach the myclass class to those elements that need to apply the tooltip thingy. (Just make sure you run that line of code after your DOM has been loaded. See below.)
只需编写即可轻松实现这种魔力$(".myclass").tooltip()，这行代码完全符合您的要求。您唯一需要做的就是将 myclass 类附加到需要应用工具提示的那些元素上。（只需确保在加载 DOM 后运行该行代码。见下文。）
$(document).ready(function() {
$(".myclass").tooltip();
});
EDIT: apparently you can't use the class tooltip(probably because it is somewhere internally used!).
编辑：显然你不能使用类工具提示（可能是因为它在内部使用！）。
I'm just wondering why bootstrap doesn't run the code you specified with some class I can include.
我只是想知道为什么 bootstrap 不运行您使用我可以包含的某些类指定的代码。
The thing you want produces almost the same code as you have to do now. The biggest reason however they did not do that, is because it causes a lot of trouble. One person wants to assign it to an element with an ID; others want to assign it to elements with a specified classname; and again others want to assign it to one specified element achieved through some selection process. Those 3 options cause extra complexity, while it is already provided by jQuery. I haven't seen many plugins do what you want (just because it is needless; it really doesn't save you code).
你想要的东西产生的代码几乎和你现在要做的一样。然而他们没有这样做的最大原因是因为这会造成很多麻烦。一个人想把它分配给一个带有 ID 的元素；其他人想将它分配给具有指定类名的元素；并且其他人希望将其分配给通过某些选择过程获得的一个指定元素。这 3 个选项会导致额外的复杂性，而它已经由 jQuery 提供。我还没有看到很多插件可以做你想做的事（只是因为它是不必要的；它真的不会为你节省代码）。
回答by Naresh Kumar
Simple use of this:
简单使用这个：
<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip">
tooltip
</a>
Using jQuery:
使用jQuery：
$(document).ready(function(){
$('#mytooltip').tooltip();
});
You can left side of tooltip u can simple add this->data-placement="left"
您可以在工具提示的左侧简单添加this->data-placement="left"
<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a>
