BootStrap Popover 5.0 不显示答案

【问题标题】：BootStrap Popover 5.0 not displayingBootStrap Popover 5.0 不显示
【发布时间】：2021-01-27 09:38:02
【问题描述】：

使用最新的引导弹出框时，第二次悬停时 data-bs-content 不显示。有人解决这个问题吗？

HTML 代码：

<div class="tab" tabindex="0" data-bs-html="true" data-bs-container="body" 
data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="bottom" data-bs- 
content="<ul class='list mb-0'>
           <li>Disease Prediction</li>
           <li>Lead Identification &amp; Optimization</li>
           <li>Exploratory Safety &amp; Toxicology</li>
         </ul>">
<img src="image/area.png" class="my-3" alt="Pre- 
Discover" width="70">
    <h5 class="area-title">Discovery</h5>
</div>

我正在使用脚本：

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

【问题讨论】：

我已经切换到下拉:) getbootstrap.com/docs/5.0/components/dropdowns

标签： bootstrap-5

【解决方案1】：

我发现你必须在特定的 popover 对象之后添加代码的 inizialize 部分。

示例：

<!--POPOVER-->
  
<button type="button" class="btn btn-lg btn-success" 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>
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
            var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
              return new bootstrap.Popover(popoverTriggerEl)
            })
</script>

另外，您需要将引导库添加到代码中：

示例：

  <!--Javascript part-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
          </script>

【讨论】：

【解决方案2】：

如果您自己编译 bootstrap.bundle.min.js，则需要删除对 bootstrap 的引用。 bootstrap.bundle.min.js 文件中包含的编辑后的 js 将是：

const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
popoverTriggerList.map(popoverTriggerEl => {
  return new Popover(popoverTriggerEl)
})

还要确保使用包含 popper.js 的 bootstrap 5 js 文件

【讨论】：