工具提示和彈出框在 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