javascript - 模态表单标签标签中的引导工具提示不起作用

Question

我想让标签内的文本有一个与之关联的悬停工具提示。我不确定是不是导致问题的标签标签，但我知道如果我移动到标签之外的工具提示，它会起作用。这是一个代码片段：

<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 函数以启用工具提示的帖子，但位于页面其他位置的工具提示可以工作，正如我所提到的，如果我只是将工具提示移到标签之外，它就可以在这种模式下工作。我还删除了 z-index 以防万一这是问题但没有乐趣。

抱歉，如果这很明显/已经回答，但我不明白。谢谢。

标签： javascripthtmlbootstrap-4

Answer 1

正如文档中所述：

出于性能原因，工具提示是可选的，因此您必须自己初始化它们。

在包含 bootstrap.js 和结束标记之前，将以下 javascript 添加到页面末尾，您</body>的代码应该可以按预期工作：

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

见小提琴。