如何正确初始化引导程序弹出窗口和工具提示

Question

我已经阅读了文档（即您必须自己初始化它们），并看到了许多关于需要这样的东西的答案：

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

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

在你的代码中（这是在我的application.js中），让Bootstrap工具提示和popovers等工作。

我还看到有人提到，如果你有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.

如果你只想要popover，上面的块应该足够了，我认为你不需要运行工具提示（然而FYI popover插件确实从tooltop类扩展而来）