Twitter Bootstrap的工具提示

Question

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

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

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

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

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

但是现在我的问题是，为什么Twitter Bootstrap不提供此类tooltip ？ 只是为了允许更大的配置？ 将带有工具提示的单个元素添加到tooltipclass还是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属性“在#example div中”来定位所有工具提示，这样您就可以单独向该部分添加特殊样式或选项。 简而言之，您几乎可以使用任何有效的选择器来定位您的工具提示，而无需使用额外的类来将标记弄脏您的工具提示。

Answer 2

最简单的方法是

将其放在标题中：

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

然后

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

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

祝好运。

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类附加到需要应用工具提示thing的那些元素上。 （只需确保在加载DOM之后运行该行代码即可。请参见下文。）

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

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

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

您想要的东西产生的代码几乎与您现在要做的相同。 但是，他们没有这样做的最大原因是，这引起了很多麻烦。 一个人想要将其分配给具有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 个解决方案

解决方案1
107 已采纳 2012-05-03 19:00:01

解决方案2
14 2012-12-27 07:57:53

解决方案3
5 2013-08-06 18:54:50

解决方案4
3 2012-12-29 10:22:47

解决方案5
3 2014-07-18 22:02:23

解决方案6
2 2012-05-03 17:23:01

解决方案7
0 2014-03-23 14:44:46

Twitter Bootstrap的工具提示

问题描述

7 个解决方案

解决方案1 107 已采纳 2012-05-03 19:00:01

解决方案2 14 2012-12-27 07:57:53

解决方案3 5 2013-08-06 18:54:50

解决方案4 3 2012-12-29 10:22:47

解决方案5 3 2014-07-18 22:02:23

解决方案6 2 2012-05-03 17:23:01

解决方案7 0 2014-03-23 14:44:46

解决方案1
107 已采纳 2012-05-03 19:00:01

解决方案2
14 2012-12-27 07:57:53

解决方案3
5 2013-08-06 18:54:50

解决方案4
3 2012-12-29 10:22:47

解决方案5
3 2014-07-18 22:02:23

解决方案6
2 2012-05-03 17:23:01

解决方案7
0 2014-03-23 14:44:46