Question

当我将鼠标悬停在标签引导程序上时，工具提示不能像javascript工具提示示例http://getbootstrap.com/javascript/#tooltips

那样工作

我试图让我的工具提示标签以与顶部按钮工具提示示例相同的方式工作。

出于某些原因，我的例子只显示默认方式。如何让我的标签显示工具提示，如bootstrap工具提示顶部示例？

我的示例http://codepen.io/riwakawebsitedesigns/pen/KhDAz

<div class="form-group required">
<label class="col-sm-2 control-label" for="input-url"><span data-toggle="tooltip" data-html="true" title="Test Tool Tip">URL</span></label>
<div class="col-sm-10">
<input type="text" name="config_url" value="" placeholder="" id="input-url" class="form-control" />
</div>
</div>

<br/><br/><br/>
Sample Button test.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

Answer 1

您需要先导入bootstrap js，然后使用$("[data-toggle='tooltip']").tooltip();在javascript中添加工具提示功能。

http://codepen.io/anon/pen/LewqF

Answer 2

其他答案是正确的，说您需要$('.btn-default, .test').tooltip()才能使工具提示有效。然而，你遇到的另一个问题是codepen包含jquery last，所以你的bootstrap js不能将自己附加到jquery，所以当你试图调用它时，.tooltip（）函数不可用。

使用类似bootply.com或jsfiddle.net的内容，因为您可以更好地控制js文件包含和执行顺序。

Answer 3

您只需在JS

中添加此代码段即可

<script>
    $(function () {
        $("[data-toggle='tooltip']").tooltip();
    });
</script>

标签上的Bootstrap工具提示不起作用

3 个答案: