jquery - 如何正确初始化 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。

如果您只想要弹出窗口，上面的 block 应该足够了，我认为您不需要运行工具提示(但是仅供引用，弹出窗口插件确实从工具顶部类扩展)