工具提示和弹出窗口在 Bootstrap 5 中不起作用

Question

我使用 Bootstrap 5 创建了一个非常小的网站。

\n

我使用“工具提示”和“弹出窗口”在页面底部创建了 2 个按钮，但它们不起作用，没有显示任何内容。

\n

这是我的网站，位于页面底部：

\n

https://www.mathieulebert.fr/

\n

这是 HTML 代码：

\n

<!doctype html>\n<html lang="fr" class="h-100">\n\n  <head>\n    <link rel="manifest" href="/manifest.json">\n    <link rel="canonical" href="https://www.mathieulebert.fr/">\n    <link href="bootstrap.min.css" rel="stylesheet">\n    <link href="style.css" rel="stylesheet">\n  </head>\n\n  <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">  \n\n<button type="button" class="btn btn-secondary m-5" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">\n  Tooltip on top\n</button>\n\n<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\xc3\xa9">\n  Popover on bottom\n</button>\n\n    <script src="bootstrap.bundle.min.js"></script>\n    <script src="clipboard.min.js"></script>\n    <script src="pwa.js"></script>\n    <script src="feed.js"></script>\n\n    <script>\n      var clipboard = new ClipboardJS(\'.btn-clipboard\');\n\n      clipboard.on(\'success\', function (e) {\n        console.log(e);\n      });\n\n      clipboard.on(\'error\', function (e) {\n        console.log(e);\n      });\n    </script>\n\n  </body>\n\n</html>\n

\n

Answer 1

在当前的实现中，默认情况下不会运行在各处启用工具提示和弹出窗口的代码。你必须自己运行它，主要是因为 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))

您必须在加载 Bootstrap 的 JS后运行此代码，例如bootstrap.bundle(.min).js

注意：与 Bootstrap 的其他版本不同，在其他版本中，阅读文档在某种程度上是可选的，但这v5一点并不适用。
很多假设已经被放弃，很多事情已经改变，你被赋予了更多的自由。

为了确保这是它们在您的实现中不起作用的唯一原因，我在您的网站上运行了上述代码，结果如下：