我使用 Bootstrap 5 创建了一个非常小的网站。
我使用“工具提示”和“弹出窗口”在页面底部创建了 2 个按钮，但它们不起作用，没有显示任何内容。
这是我的网站，位于页面底部：
https://www.mathieulebert.fr/
这是 HTML 代码：
<!doctype html>
<html lang="fr" class="h-100">
<head>
<link rel="manifest" href="/manifest.json">
<link rel="canonical" href="https://www.mathieulebert.fr/">
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="position-relative d-flex flex-column bg-dark text-white text-center" data-bs-spy="scroll" data-target="#navbar" data-bs-offset="85" tabindex="0">
<button type="button" class="btn btn-secondary m-5" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary m-5" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Copié">
Popover on bottom
</button>
<script src="bootstrap.bundle.min.js"></script>
<script src="clipboard.min.js"></script>
<script src="pwa.js"></script>
<script src="feed.js"></script>
<script>
var clipboard = new ClipboardJS('.btn-clipboard');
clipboard.on('success', function (e) {
console.log(e);
});
clipboard.on('error', function (e) {
console.log(e);
});
</script>
</body>
</html>
在当前的实现中，默认情况下不会运行在各处启用工具提示和弹出窗口的代码。你必须自己运行它，主要是因为 Bootstrap 试图对你的网站做出更少的假设并给你更多的控制权。这在未来可能会改变。
您在他们的文档中有一个关于如何进行的示例随处启用工具提示.
较短的版本：
[...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
.forEach(el => new bootstrap.Tooltip(el))
弹出窗口文档页面上有一个示例，说明如何到处启用弹出窗口.
较短的版本：
[...document.querySelectorAll('[data-bs-toggle="popover"]')]
.forEach(el => new bootstrap.Popover(el))
你必须运行这段代码after加载Bootstrap的JS，例如bootstrap.bundle(.min).js
Note:与其他版本的 Bootstrap 不同，在其他版本中，阅读文档是可选的，v5但事实并非如此。
很多假设已经被放弃，很多事情已经改变，你被赋予了更多的自由。
为了确保这是它们在您的实现中不起作用的唯一原因，我在您的网站上运行了上述代码，结果如下：
