Question

在Bootstrap文档页面中，工具提示的签名为：

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

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

我知道它对标签很有用，但我看不出它可以为工具提示带来什么用处。

克里斯，

必须明确初始化工具提示，如下所示：

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

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

编辑＃2：

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

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

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

开发人员可以这样做：

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

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

但是rel =“tooltip”没有针对HTML5进行验证，因此人们开始建议使用data-toggle =“tooltip”，因为Bootstrap已经对其他组件使用数据切换，而数据*在HTML5中有效。

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

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

Answer 1

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

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

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

开发人员可以这样做：

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

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

但是rel =“tooltip”没有针对HTML5进行验证，因此人们开始建议使用data-toggle =“tooltip”，因为Bootstrap已经对其他组件使用数据切换，而数据*在HTML5中有效。

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

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

Answer 2

我用这个：

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

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

Answer 3

他们选择使用data-toggle作为JavaScript的指标，以确定何时是工具提示。当工具提示JS文件看到data-toggle="tooltip"属性时，它知道启动并运行。

更常见的方法可能是使用类（<a href="#" class="tooltip" title="first tooltip">hover over me</a>），但它们已经改为data-*属性。同样的事情，工作和philisophically，data-*属性是为JavaScript操作而设计的，所以我认为保持类免费是很好的。

Bootstrap工具提示数据切换

3 个答案: