Question

我正在尝试使用bootstrap工具提示 - 但目前我无法显示它们。我已按照Bootstrap Docs指南中的所有说明进行操作，但它们仍无法正常工作。有什么我可能会失踪吗？

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>

JS：

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

~~可以在这里找到代码笔： http://codepen.io/anon/pen/LpzPxR~~

我最初的猜测是CSS ~~出了问题，但我似乎无法在笔中使用~~。

编辑：我已在codepen中修复了该问题，但实际模板仍然显示不正确 - http://i62.tinypic.com/2ik2u6s.jpg

Answer 1

你几乎就在那里：在bootstrap.js之前，你只是缺少jquery。

来自bootstrap文档：

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

请参阅 forked codepen

注意：我还添加了font-awesome.css，因为你有后一个图书馆的图标。

在评论和对话中发布的this screenshot中的

编辑，似乎OP也有jQuery UI Tooltip，这与引导程序工具提示相冲突。

Bootstrap工具提示未显示

1 个答案: