Twitter Bootstrap的工具提示

Question 1

我正在使用Twitter Bootstrap-我不是前端开发人员！但是，这几乎使过程变得很有趣-我敢说-很有趣！

我对工具提示有些困惑。它们已包含在文档中，但Twitter假定具备一些知识。例如，他们说要使用以下JavaScript代码触发工具提示。

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

在探究它们的源代码之后，我意识到带有工具提示的字段必须在一个类中，并运行以下代码。

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

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

Question 2

我认为您的问题归结为在设置工具提示时使用哪个合适的选择器，而答案几乎就是您想要的。如果要使用类来触发工具提示，则可以执行以下操作：

<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在#examplediv属性“内”将所有工具提示作为目标，这样您就可以向该部分单独添加特殊样式或选项。简而言之，您几乎可以使用任何有效的选择器来定位您的工具提示，而无需使用额外的类来将您的标记弄脏目标。

Question 3

最简单的方法是

将其放在标题中：

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

接着

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

因此，使用该js代码（如果您在页面中的任何位置标记了），即可rel="tooltip"获取引导工具提示。

祝好运。

Question 4

将此添加到标题中

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

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

Question 5

我包括了JS和CSS文件，并且想知道为什么它不起作用，是什么使它起作用了，是在以下位置添加了以下内容<head>：

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

Question 6

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

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

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

Question 7

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

您将始终必须定义哪些元素应具有工具提示。而且我不明白为什么Bootstrap应该提供此类，而您还是自己定义这些类。也许您希望引导程序自动执行一些操作？然而，这种魔力也会引起很多问题（不良副作用）。

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

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

编辑：显然您不能使用类工具提示（可能因为它在内部使用！）。

我只是想知道为什么引导程序不运行您可以包含的某些类指定的代码。

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

Question 8

简单使用这个：

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