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 以防万一这是问题，但并不高兴。

对不起，如果这很明显/已经回答了，但我没有明白。谢谢。

Answer 1

正如 docs 中所述：

<块引用>

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

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

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

见fiddle。

模态表单标签中的 Bootstrap 工具提示不起作用

1 个答案: