带有 html 内容的 bootstrap 5 弹出框

Question

我正在尝试将 bootstrap5 弹出框内容与 HTML 属性分开，就像您可以对其他组件做的那样，但我无法让它工作。

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

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<a type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover">Click to toggle popover</a>
<div id="customdiv" style="display: none">
  <h1> popover </h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

Answer 1

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

Answer 2

没有一个答案真正为我提供了一个完整的解决方案，在 data-bs-trigger 事件发生之前弹出框不会出现，所以这是我的解决方案：

悬停时会弹出的元素：

<a class="btn btn-question-tag" 
   data-bs-toggle="popover" 
   data-bs-trigger="hover focus" 
   data-content-id="popover-27" 
   href="#">
element to trigger popover
</a>

其内部 html 将在出现的弹出框中的元素。

<div style="display: none;" id="popover-27">
    <div class="popover" role="tooltip">
      This is the 
    </div>
</div>

javascript：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    const popoverId = popoverTriggerEl.attributes['data-content-id'];
    if (popoverId) {
        const contentEl=$(`#${popoverId.value}`).html();
        return new bootstrap.Popover(popoverTriggerEl, {
            content: contentEl,
            html: true,
        });
    }else{//do something else cause data-content-id isn't there.
    }
}

Answer 3

没有 jQuery 依赖的 simple JavaScript 没有人能正确回答。这很重要，因为 Bootstrap 5 不再依赖 jQuery。

HTML：

<a class="btn btn-link" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content-id="popover-content" tabindex="0" role="button">
  Open Popover
</a>

<div id="popover-content" class="d-none">
  Popover content with <strong>HTML</strong>.
</div>

JavaScript：

const list = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
list.map((el) => {
  let opts = {
    animation: false,
  }
  if (el.hasAttribute('data-bs-content-id')) {
    opts.content = document.getElementById(el.getAttribute('data-bs-content-id')).innerHTML;
    opts.html = true;
  }
  new bootstrap.Popover(el, opts);
})

Answer 4

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
var popover = new bootstrap.Popover(document.querySelector('.element'), {
        trigger: 'hover',
        html: true,
        content:function () {
            return '<label>Test</label>';
        },
})

Answer 5

$(function() {
var options = {
    html: true,
    title: "Optional: HELLO(Will overide the default-the inline title)",
    //html element
    content: $("#popover-content")
    //Doing below won't work. Shows title only
    //content: $("#popover-content").html()

  }
  var exampleEl = document.getElementById('example')
  var popover = new bootstrap.Popover(exampleEl, options)
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<div id="popover-content">
  <div class="input-group">
    <input type="text" class="form-control form-control-sm" placeholder="Search" name="search">
    <div class="input-group-btn">
      <button class="btn btn-danger" type="submit">
        <i class="bi bi-search"></i>
      </button>
    </div>
  </div>
  <div class="col-sm-8"></div>
  <button class="btn btn-success m-3">Button</button>
  <input type="submit" class="btn btn-danger" placeholder="Button red">
</div>

<a id="example" tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" title="Default: Html inside popover" data-bs-content="And here's some amazing content. It's very engaging. Right? This is default, but Can be empty">Html inside popover</a>

Answer 6

var hideDiv = document.getElementsByClassName('hide')[0].style.visibility = 'hidden'
var popoverBtn = document.getElementById('btn-action')
var popover = new bootstrap.Popover(popoverBtn, {
    placement: 'bottom',
    html: true,
    content: function() {
        return document.getElementById('id-content-div');
    }

})
   var showDiv = document.getElementsByClassName('hide')[0].style.visibility = 'visible'

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<a type="button" class="btn btn-lg btn-danger" id="btn-action">Click to toggle popover</a>
<div id="id-content-div" class="hide">
  <h1> popover </h1>
  <p>Hello popover world</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

Answer 7

标题和内容的长度不能为零。来自Bootstrap docs...

“零长度的标题和内容值永远不会显示弹出框。”

<a type="button" class="btn btn-lg btn-danger"
        data-bs-toggle="popover"
        data-bs-title="Hello">Click to toggle popover</a>

Demo