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类扩展）

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

1 个答案: