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

Question

当我将鼠标悬停在标签引导程序工具提示上时，它无法像javascript工具提示示例中的方式那样工作： http://getbootstrap.com/javascript/#tooltips

我正在尝试使我的工具提示标签以与顶部按钮工具提示示例相同的方式工作。

由于我的示例中的某些原因，它仅显示默认方式。 如何获得标签来显示工具提示，例如引导工具提示顶部示例？

我的示例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中添加工具提示功能$("[data-toggle='tooltip']").tooltip(); 。

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

Answer 2

其他答案是正确的，说您需要此$('.btn-default, .test').tooltip()才能使工具提示正常工作。 但是，您遇到的另一个问题是codepen最后包含了jquery，因此您的bootstrap js无法将自身附加到jquery，因此当您尝试调用.tooltip（）函数时不可用。

请改用bootply.com或jsfiddle.net之类的名称 ，因为您可以更好地控制js文件的包含和执行顺序。

Answer 3

您只需要在JS中添加此代码段

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