模態形式 label 標簽內的引導工具提示不起作用

Question

我想讓 label 中的文本有一個與之關聯的懸停工具提示。 我不確定是不是 label 標簽導致了這個問題，但我知道如果我移動到 label 之外的工具提示，它就可以工作。 這是一個代碼片段：

<div class="form-group">
    <label class="col-sm-3" style="margin-left: 2%;" 
    for="endpointname">Name: 
    <i class="fa fa-info-circle" data-toggle="tooltip" title="The endpoint name should reflect the name of the application"></i></label> 
    <div class="col-sm-4" style="z-index: 999;">
       <input type="text" class="form-control" id="endptname"
            name="endptname" onchange="endptNameEntered()"
            placeholder="Enter name" />
    </div>
</div>

我看過其他關於添加 javascript function 以啟用工具提示的帖子，但位於頁面其他位置的工具提示可以工作，正如我所提到的，如果我只是將工具提示移到 ZD304BA20E96D873411588 之外，它就可以在這種模式下工作。 我還刪除了 z-index 以防萬一這是問題但沒有樂趣。

抱歉，如果這很明顯/已經回答，但我不明白。 謝謝。

Answer 1

正如文檔中所述：

出於性能原因，工具提示是可選的，因此您必須自己初始化它們。

在包含 bootstrap.js 和結束</body>標記之前，將 javascript 的以下位添加到頁面末尾，您的代碼應該按預期工作：

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

見小提琴。