如何正确初始化Bootstrap弹出窗口和工具提示

Question

我已经阅读了文档(即你必须自己初始化它们)并看到许多关于需要这样的东西的答案:

$(document).ready(function() {
    $('[data-toggle=tooltip]').tooltip();
}); 


$(document).ready(function() {
    $('[data-toggle=popover]').popover();
}); 

在你的代码中(这是在我的application.js中)让Bootstrap工具提示和弹出窗口等工作.

我也看到提到如果你有bootstrap.js文件包含这是不需要的.

无论哪种方式,我仍然无法加载工具提示或弹出窗口.我将两个示例直接粘贴到我的主布局文件中:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

但他们仍然无法工作.我无法弄清楚我错过了什么.模态工作,所以我知道我已经加载了bootstrap.js.

Answer 1

你有一个错字,尝试改变这个:

$(document).ready(function() {
    $('[data-toggle=popover]').popover();
}); 

对此:

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

你需要运行它来初始化以及bootstrap.js.

如果你只是想要弹出窗口,上面的块应该足够了,我认为你不需要运行工具提示(但是FYI popover插件确实从tooltop类扩展)