Question

http://getbootstrap.com/javascript/#tooltips

在“四个方向”示例中，四个按钮在左侧，顶部，底部和右侧都有工具提示。

我试图在我自己的html文件中复制它，bootstrap，jquery，css等设置正确。

然而，bootstrap文档说这是选择加入功能，这意味着我必须自己初始化它，他们为使用提供的示例代码是这样的：

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

所以我将它包装在html文件中我的结束头标记上方的脚本标记中，但它不起作用。我知道#example部分可能是不正确的语法，但我不知道＃表示什么以及放在这里使它挂钩到示例“四个方向”代码，这就是：

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

我是否将'#example'更改为'#button'以将其与按钮类型相关联，将'#btn btn-default'更改为将其与类相关联，或将'#tooltip'更改为将其与数据切换相关联，或'＃right'，'＃left'，'＃top'，'＃bottom'在四个复制的行中与所有数据放置标记相关联，或'#title'将其与标题相关联？

我已经找到了其他stackoverflow的答案，如何通过粘贴似乎使用替代解决方案的代码来完成此操作，例如将其与“rel =”标记相关联，但我试图理解这不仅仅是复制粘贴工作代码。

以下是我的HTML代码供参考：

http://pastebin.com/83Cf8Csr

Answer 1

首先，在开始编写使用上述内容的任何js之前，需要包含jquery和bootstrap.js。 ~~其次你不需要这个~~

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

因为您已经在使用数据属性作为js代码的替代品。您可以使用其中之一，但不能同时使用两者。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

数据切换和数据展示位置将初始化您的工具提示。

那是我的坏事，我错过了它所说的选择的部分。

所以你的问题就是你试图在#example上初始化工具提示，其中没有带有该id的元素。指定正确的ID或类。其次，数据属性将作为选项，因此您不需要初始化选项。这是一个例子

Fiddle

Bootstrap工具提示使用实际示例工具提示按钮？

1 个答案: