Twitter Bootstrap 的工具提示答案

【问题标题】：Tooltips with Twitter BootstrapTwitter Bootstrap 的工具提示
【发布时间】：2012-05-13 06:06:26
【问题描述】：

我正在使用 Twitter Bootstrap——而且我不是前端开发人员！然而，它让这个过程几乎——我敢说——很有趣！

我对工具提示有点困惑。他们是covered in the documentation，但 Twitter 假设有一些知识。例如，他们说使用以下 JavaScript 代码触发工具提示。

$('#example').tooltip(options)

在查看了它们的源代码后，我意识到带有工具提示的字段需要在一个类中并运行以下代码。

$('.tooltipclass').tooltip(options)

但是现在我的问题是，为什么 Twitter Bootstrap 不提供这样的类tooltip？只是为了允许更大的配置？将带有工具提示的单个元素添加到tooltipclass 更好，还是应该将周围区域添加到tooltipclass？如果我使用类标识符 (.class) 而不是名称标识符 (#name) 是否重要？

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

我认为您的问题归结为在设置工具提示时使用什么合适的选择器，而答案几乎就是您想要的任何东西。如果您想使用一个类来触发您的工具提示，您可以这样做，例如：

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>

然后，您可以触发所有带有.link 类的链接作为工具提示附加，如下所示：

$('.link').tooltip()

现在，要回答您关于为什么引导开发人员不使用类来触发工具提示的问题，因为它并不是完全需要的，您几乎可以使用任何您想要定位工具提示的选择器，例如（我的个人最喜欢的）rel 属性。使用此属性，您可以定位所有将rel 属性设置为tooltip 的链接或元素，如下所示：

$('[rel=tooltip]').tooltip()

你的链接看起来像这样：

<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a>

当然，您也可以使用容器类或 id 来定位特定容器内的工具提示，您希望使用特定选项将其挑出或与其余内容分开，您可以像这样使用它：

$('#example').tooltip({
    selector: "a[rel=tooltip]"
})

此选择器将使用 rel 属性“在”您的 #example div 中定位您的所有工具提示，这样您就可以单独向该部分添加特殊样式或选项。简而言之，您几乎可以使用任何有效的选择器来定位您的工具提示，而无需使用额外的类来污染您的标记来定位它们。

【讨论】：

完美！ $('[rel=tooltip]').tooltip() 是否存在性能问题？
@schmmd 我看不出为什么会有性能下降，除非你有 100,000 个工具提示可供选择，所以不用太担心，它是 CSS 之类的属性选择器。
您可能不关心语义，但理想情况下，rel 最好保留用于这些目的，class 在这里可能会更好，请参阅stackoverflow.com/questions/15214776/…
关于 rel="tooltip" 的重要提示！
最好使用 data-rel="tooltip" 而不是 rel="tooltip" 以符合 HTML 标准。

【解决方案2】：

最简单的使用方法是

把它放在标题中：

<script>
    $(function ($) {
        $("a").tooltip()
    });
</script>

然后

<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text">
    My link text
</a>

如果您在页面中的任何位置使用 rel="tooltip" 标记，那么使用该 js 代码获取引导工具提示。

祝你好运。

【讨论】：

【解决方案3】：

将此添加到您的标题中

<script>
    //tooltip
    $(function() {
        var tooltips = $( "[title]" ).tooltip();
        $(document)(function() {
            tooltips.tooltip( "open" );
        });
    });
</script>

然后只需将属性title="your tooltip" 添加到任何元素

【讨论】：

这对我有用，目前工具提示出现在元素的顶部。如何更改它以使工具提示出现在底部？

【解决方案4】：

我包含了 JS 和 CSS 文件，想知道为什么它不起作用，是什么让它起作用的原因是我在 <head> 中添加了以下内容：

<script>
jQuery(function ($) {
    $("a").tooltip()
});
</script>

【讨论】：

【解决方案5】：

只需标记所有数据切换...

jQuery(function () {
    jQuery('[data-toggle=tooltip]').tooltip();
});

http://jsfiddle.net/Amged/xUQ6D/19/

【讨论】：

【解决方案6】：

那是因为这些东西（我的意思是工具提示等）是 jQuery 插件。是的，他们假设了一些关于 jQuery 的基本知识。我建议您至少查找有关 jQuery 的基本教程。

您总是需要定义哪些元素应该有工具提示。而且我不明白为什么 Bootstrap 应该提供该类，您定义这些类或您自己。也许您希望引导程序自动发挥作用？然而，这种魔法也会导致很多问题（不需要的副作用）。

只需编写$(".myclass").tooltip() 就可以轻松实现这种魔力，这行代码完全符合您的要求。您唯一需要做的就是将 myclass 类附加到那些需要应用工具提示的元素。（请确保在加载 DOM 后运行该行代码。见下文。）

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

编辑：显然你不能使用类 tooltip （可能是因为它在内部使用的某个地方！）。

我只是想知道为什么 bootstrap 不运行您使用我可以包含的某些类指定的代码。

你想要的东西产生的代码几乎和你现在必须做的一样。但是他们没有这样做的最大原因是因为它会引起很多麻烦。有人想将其分配给具有 ID 的元素；其他人希望将其分配给具有指定类名的元素；并且其他人希望将其分配给通过某些选择过程实现的指定元素。这 3 个选项会导致额外的复杂性，而 jQuery 已经提供了它。我还没有看到很多插件做你想做的事（只是因为它是不必要的；它真的不会为你节省代码）。

【讨论】：

仅供参考，这实际上是我尝试的早期方法。你不能使用类tooltip。它会清除标签的内容。我切换到tooltiparea。
我不希望有魔法，我只是想知道为什么 bootstrap 不能运行你指定的代码，我可以包含一些类。

【解决方案7】：

这个的简单使用：

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip">
   tooltip
</a>

使用 jQuery：

$(document).ready(function(){
    $('#mytooltip').tooltip();
});

你可以在工具提示的左边你可以简单地添加this->data-placement="left"

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a>

【讨论】：