標簽上的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>