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

Question

我创建了一个非常小的站点，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>

Answer 1

在当前的实现中，在所有地方启用工具提示和弹出窗口的代码默认情况下不是运行。您必须自己运行，主要是因为 Bootstrap 试图对您的网站做出更少的假设并给您更多的控制权。这在未来可能会改变。

你在他们的文档中有一个关于如何enable tooltips everywhere的例子。
较短的版本：

[...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
  .forEach(el => new bootstrap.Tooltip(el))

并且您在 popovers 文档页面上有一个关于如何 enable popovers everywhere 的示例。
较短的版本：

[...document.querySelectorAll('[data-bs-toggle="popover"]')]
  .forEach(el => new bootstrap.Popover(el))

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

注意： 与 Bootstrap 的其他版本不同，阅读文档在某种程度上是可选的， v5 这不太成立。
许多假设已被删除，不少事情发生了变化，您获得了更多的自由。

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

Answer 2

请安排链接
首先 bootstrap.min.js
第二个 bundle.min.js 或 popper.js

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>


<script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
    })
</script>

Answer 3

弹出窗口需要在 Bootstrap v5.1 中明确启用。

bootstrap.bundle.min.js 包括 popper.js，它是弹出框和工具提示组件所依赖的第 3 方库。

在正文末尾粘贴以下内容 -

<script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
      return new bootstrap.Popover(popoverTriggerEl)
    })
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
</script>

参考here

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

Tooltips and Popovers not working in Bootstrap 5

javascript

twitter-bootstrap

tooltip

popover

bootstrap-5