Bootstrap 弹出框未显示焦点事件上的锚元素

Question

我试图在点击和 hover 事件上显示引导弹出窗口。

我在一个页面上加载了多个控件，并且我正在尝试绑定 bootstrap-5 弹出框，而不需要这些控件的 jQuery 依赖项。

在此示例中，我使用了按钮和锚元素，并尝试使用 JavaScript 绑定弹出框，当使用事件 hover（触发器：'悬停'）时，按钮和锚元素都会触发弹出框，但对于事件单击（触发器：'focus'）弹出框未显示锚元素。

我使用下面的代码将事件绑定到控件。

var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]'));
  var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl, {
      container: 'body',
      html: true,
      trigger: 'focus',
      //tabIndex: -1,
      content: function() {
        return document.getElementById('popover-content').outerHTML;
      }
    })
  });  

我刚刚尝试在JSFiddle上复制相同的内容

有人可以在这里帮助我使点击事件（触发器：'focus'）甚至适用于锚标签。

Answer 1

因此，添加href属性似乎解决了这个问题。 或者，您可以在单击元素时使用工具提示的show方法自己触发它。

如果需要，不要忘记 preventDefault() 。

 document.addEventListener("DOMContentLoaded", function(event) { var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]')); var popoverList = popoverTriggerList.map(function(popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl, { container: 'body', html: true, trigger: 'focus', //tabIndex: -1, content: function() { //console.log(this.getAttribute("email")); return document.getElementById('popover-content').outerHTML; } }) }); var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="hover-action"]')); var popoverList = popoverTriggerList.map(function(popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl, { container: 'body', html: true, trigger: 'hover', //tabIndex: -1, content: function() { //console.log(this.getAttribute("email")); return document.getElementById('popover-content').outerHTML; } }) }); });

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"> </script> <ul> <li> <a href="#" class="people-card" people-card="click-action" email="vsanthosh@deloitte.com">Show Card on Click</a> </li> <li> <a class="people-card" people-card="hover-action" email="palagkumar@deloitte.com">Show Card on Hover</a> </li> </ul> <div id="popover-content" style="display:none"> <p>test</p> </div>