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 不同，Bootstrap 的阅读文档在某种程度上是可选的，而 v5 并非如此。
很多假设都被摒弃了，很多事情都发生了变化，你获得了更多的自由。

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

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

1 个答案: