工具提示和弹出框在 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 试图对你的网站做更少的假设，并给你更多的控制权。 这在未来可能会改变。

您在他们的文档中有一个关于如何在任何地方启用工具提示的示例。
一个较短的版本：

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

您在 popovers 文档页面上有一个关于如何在任何地方启用 popovers的示例。
较短的版本：

[...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，它是 popover 和 tooltip 组件所依赖的第三方库。

将以下内容粘贴到正文的末尾 -

<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>

参考这里

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

问题描述

3 个解决方案

解决方案1
6 已采纳 2021-04-07 17:10:06

解决方案2
2 2021-08-13 19:30:26

解决方案3
1 2021-12-15 20:58:45

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

问题描述

3 个解决方案

解决方案1 6 已采纳 2021-04-07 17:10:06

解决方案2 2 2021-08-13 19:30:26

解决方案3 1 2021-12-15 20:58:45

解决方案1
6 已采纳 2021-04-07 17:10:06

解决方案2
2 2021-08-13 19:30:26

解决方案3
1 2021-12-15 20:58:45