Javascript 引导工具提示未显示

我正在尝试使用引导工具提示，但目前无法显示它们。我已经按照引导文档指南上的所有说明进行了操作，但它们仍然不起作用。有什么我可能遗漏的吗

HTML:

在这里可以找到密码笔：

我最初的猜测是CSS出了问题，但我似乎也无法让它在笔下工作

---

编辑：我已经在代码笔中解决了这个问题，但是实际的模板仍然显示不正确-

你几乎做到了：你只是缺少jquery，在

bootstrap.js

之前

从引导程序文档：

一些插件和CSS组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖项。还要注意，所有插件都依赖于jQuery（这意味着jQuery必须包含在插件文件之前）

请参见

注意：我还添加了

font-awesome.css

，因为您有后一个库中的图标

---

---

编辑：从发表的评论和对话中可以看出，OP也有

jQuery UI工具提示

，这与引导工具提示冲突。

在代码笔中工作，但没有修复模板-悬停模板时显示如下：Hm，在上面的屏幕截图中，您似乎在按钮上切换了悬停状态，但这不是触发工具提示的原因。这可能是一个愚蠢的问题，但您是否也尝试过在同一个按钮上触发鼠标指针事件？我尝试过-但即使我没有切换悬停并单独使用鼠标指针，它仍然会显示相同的内容。从js控制台查看以下内容是否有帮助：

jQuery（'[data toggle=“tooltip”]）。tooltip（）

它为我提供了四个按钮的HTML，但没有其他内容

<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="Refresh inbox"><i class="fa fa-refresh"></i> Refresh</button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as read"><i class="fa fa-eye"></i> </button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as important"><i class="fa fa-exclamation"></i> </button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Move to trash"><i class="fa fa-trash-o"></i> </button>

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