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

Bootstrap tool tip on label not working

本文关键字：工具提示 不起作用 标签      更新时间：2023-09-26

当我将鼠标悬停在标签上时，引导工具提示的工作方式与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>

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

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

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

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

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

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

相关文章：