71

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

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

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

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

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

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

4

7 回答 7

107

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

<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 内的所有工具提示作为目标，这样您就可以单独向该部分添加特殊样式或选项。简而言之，您几乎可以使用任何有效的选择器来定位您的工具提示，并且无需使用额外的类来污染您​​的标记来定位它们。

于 2012-05-03T19:00:01.087 回答
14

最简单的使用方法是

把它放在标题中：

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

进而

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

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

祝你好运。

于 2012-12-27T07:57:53.633 回答
5

将此添加到您的标题中

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

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

于 2013-08-06T18:54:50.443 回答
3

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

<script>
jQuery(function ($) {
    $("a").tooltip()
});
</script>
于 2012-12-29T10:22:47.783 回答
3

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

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

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

于 2014-07-18T22:02:23.573 回答
2

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

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

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

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

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

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

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

于 2012-05-03T17:23:01.080 回答
0

简单的使用这个：

<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>
于 2014-03-23T14:44:46.853 回答