Html Bootstrap 工具提示数据切换

Bootstrap tooltip data-toggle

提问by platypus

In the Bootstrap documentation page, the tooltip has a signature of:

在 Bootstrap 文档页面中，工具提示具有以下签名：

<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>

What does the "data-toggle" attribute do in this scenario?

在这种情况下，“数据切换”属性有什么作用？

I know it's useful for tabs but I don't see what usefulness it can bring to tooltips.

我知道它对选项卡很有用，但我看不出它能给工具提示带来什么用处。

---

---

Chris,

克里斯，

The tooltip has to be initialized explicitly as in:

工具提示必须显式初始化，如下所示：

$(document).ready(function(){
    $(".link").tooltip();
});

Assuming that the "a" tag has a class of "link". The "data-toggle" attribute is not mandatory for the tooltip to function correctly. But you mentioned that it is for the Bootstrap JavaScript file to recognize if something is a tooltip. So it doesn't seem to make sense that omitting "data-toggle" still makes the tooltip work (as long as there is the explicit initialization). Could you explain further?

假设“a”标签有一个“link”类。“data-toggle”属性不是工具提示正常运行所必需的。但是你提到它是用于 Bootstrap JavaScript 文件来识别某些东西是否是工具提示。因此，省略“数据切换”仍然使工具提示起作用（只要有显式初始化）似乎没有意义。你能进一步解释吗？

Edit #2:

编辑#2：

After reading some GitHub issue pages, I think I have come to the following conclusion (which is my best guess).

在阅读了一些 GitHub 问题页面后，我想我得出了以下结论（这是我最好的猜测）。

Originally, in older versions of Bootstrap, the tooltip signature was:

最初，在旧版本的 Bootstrap 中，工具提示签名是：

<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
...
<a href="#" rel="tooltip" title="first tooltip">hover over me again!</a>

And developers could do:

开发人员可以这样做：

$(document).ready(function(){
    $('[rel="tooltip"]').tooltip();
});

To activate alltooltips at once (since each tooltip requires an initialization to work). In other words, it was just a convenient way to identity all the tooltips so that you can use jQuery to activate all of them.

一次激活所有工具提示（因为每个工具提示都需要初始化才能工作）。换句话说，它只是一种识别所有工具提示的便捷方式，以便您可以使用 jQuery 激活所有这些提示。

But rel="tooltip" did not validate against HTML5, so folks started suggesting using data-toggle="tooltip" because Bootstrap already uses data-toggle for other components and data-* is valid in HTML5.

但是 rel="tooltip" 没有针对 HTML5 进行验证，所以人们开始建议使用 data-toggle="tooltip" 因为 Bootstrap 已经对其他组件使用了 data-toggle 并且 data-* 在 HTML5 中是有效的。

Thus, my guess is that there is no special semantic meaning or purpose for data-toggle="tooltip" other than to provide a convenient way to identity all tooltips.

因此，我的猜测是 data-toggle="tooltip" 除了提供一种方便的方式来识别所有工具提示之外，没有特殊的语义含义或目的。

Note that you could also identity the tooltips using ID or class, but why not activate all tooltips at once (rhetorical question)?

请注意，您也可以使用 ID 或类来识别工具提示，但为什么不一次激活所有工具提示（反问）？

回答by platypus

After reading some GitHub issue pages, I think I have come to the following conclusion (which is my best guess).

在阅读了一些 GitHub 问题页面后，我想我得出了以下结论（这是我最好的猜测）。

Originally, in older versions of Bootstrap, the tooltip signature was:

最初，在旧版本的 Bootstrap 中，工具提示签名是：

<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
...
<a href="#" rel="tooltip" title="first tooltip">hover over me again!</a>

And developers could do:

开发人员可以这样做：

$(document).ready(function(){
    $('[rel="tooltip"]').tooltip();
});

To activate all tooltips at once (since each tooltip requires an initialization to work). In other words, it was just a convenient way to identify all the tooltips so that you can use jQuery to activate all of them.

一次激活所有工具提示（因为每个工具提示都需要初始化才能工作）。换句话说，这只是一种识别所有工具提示的便捷方式，以便您可以使用 jQuery 激活所有这些提示。

But rel="tooltip" did not validate against HTML5, so folks started suggesting using data-toggle="tooltip" because Bootstrap already uses data-toggle for other components and data-* is valid in HTML5.

但是 rel="tooltip" 没有针对 HTML5 进行验证，所以人们开始建议使用 data-toggle="tooltip" 因为 Bootstrap 已经对其他组件使用了 data-toggle 并且 data-* 在 HTML5 中是有效的。

Thus, my guess is that there is no special semantic meaning or purpose for data-toggle="tooltip" other than to provide a convenient way to identity all tooltips.

因此，我的猜测是 data-toggle="tooltip" 除了提供一种方便的方式来识别所有工具提示之外，没有特殊的语义含义或目的。

Note that you could also identify the tooltips using ID or class, but why not activate all tooltips at once (rhetorical question)?

请注意，您也可以使用 ID 或类来识别工具提示，但为什么不一次激活所有工具提示（反问）？

回答by user2718285

i use this:

我用这个：

<script>
    $('[title]').tooltip();
</script>

it selects all elements where is attribute title defined, and replaces default tooltip behavior with the bootstrapped one..

它选择定义了属性标题的所有元素，并用引导的行为替换默认的工具提示行为..

回答by Chris Ferdinandi

They've chosen to use data-toggleas an indicator in their JavaScript for when something is a tooltip. When the tooltips JS file sees the data-toggle="tooltip"attribute, it knows to kick in and run.

他们选择data-toggle在 JavaScript 中用作工具提示的指示器。当工具提示 JS 文件看到该data-toggle="tooltip"属性时，它知道启动并运行。

A more common approach might be to use a class (<a href="#" class="tooltip" title="first tooltip">hover over me</a>), but they've gone data-*attribute instead. Does the same thing, works, and philisophically, data-*attributes were designed for JavaScript manipulation, so I suppose it's good to keep it class free.

更常见的方法可能是使用类 ( <a href="#" class="tooltip" title="first tooltip">hover over me</a>)，但它们已经使用了data-*属性。做同样的事情，工作，并且从哲学上讲，data-*属性是为 JavaScript 操作而设计的，所以我认为保持类免费是件好事。