Bootstrap 5-弹出框（popover）

弹出框必须用 JavaScript 初始化才能工作！

<!--弹出框初始化代码-->

  <script>

   var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))

   var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {

    return new bootstrap.Popover(popoverTriggerEl)

   })

  </script>

弹出框

 • popover

触发弹出框

 • data-bs-toggle="popover"

弹出框标题

• title

弹出框内容

 • data-bs-content=" "

代码图

基本的弹出框

代码图

效果图 

弹出框出现

 • data-bs-placement

触发弹出框出现的位置

 • top（顶部）

 • buttom（底部）

 • left（左侧）

 • right（默认，右侧）

 • auto（自动）

代码图

效果图

关闭弹出框

 • focus

触发关闭弹出框

 • data-bs-trigger="focus"

代码图

效果图

悬停弹出框

 • hover

触发悬停弹出框

 • data-bs-trigger="hover"

代码图

效果图