logo标签列表

Bootstrap 5中工具提示和弹出框无法正常工作

javascripttwitter-bootstraptooltippopoverbootstrap-5
7

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

我使用"tooltips"和"popovers"在页面底部创建了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>
3个回答
10

在当前的实现中，启用工具提示和弹出框的代码默认不会运行。你需要自己运行它，主要是因为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中，阅读文档变得更为重要。
很多假设已被放弃，有很多事情已经发生了变化，并且您获得了更多自由。

为确保这是它们在您的实现中未能正常工作的唯一原因，我在您的网站上运行了上述代码，以下是结果：

screenshot

3

在Bootstrap v5.1中，必须明确启用弹出框。

bootstrap.bundle.min.js包括popper.js，这是一个第三方库，弹出框和工具提示组件依赖于它。

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

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

参考资料 这里

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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接