Question

我正在使用Twitter Bootstrap - 而且我不是前端开发人员！然而，它正在使这个过程 - 我敢说 - 好玩！

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

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

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

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

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

Answer 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 div中#example属性“内部”的所有工具提示，这样您就可以单独为该部分添加特殊样式或选项。简而言之，您几乎可以使用任何有效的选择器来定位您的工具提示，并且不需要使用额外的类来标记它们以标记它们。

Answer 2

使用它的最简单方法是

将其放在标题中：

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

然后

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

所以使用js代码，如果你的页面中有rel="tooltip"的任何标记，那么就获得引导工具提示。

祝你好运。

Answer 3

将此添加到标题中

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

您将始终必须定义哪些元素应具有工具提示。我不明白为什么Bootstrap应该提供类，你定义这些类或你自己。也许你希望引导程序自动完成一些魔术？然而，这种魔法也可能导致许多问题（不必要的副作用）。

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

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

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

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

你想要的东西产生几乎与你现在必须做的相同的代码。他们没有这么做的最大原因是因为它造成了很多麻烦。一个人想要将其分配给具有ID的元素;其他人想把它分配给具有指定类名的元素;并且其他人希望将其分配给通过某些选择过程实现的一个指定元素。这3个选项会带来额外的复杂性，而jQuery已经提供了这些选项。我没有看到很多插件做你想要的（只是因为它是不必要的;它真的不能保存你的代码）。

Answer 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>

Twitter Bootstrap的工具提示

7 个答案: