Bootstrap popover not showing for anchor element on the focus event

Question

I'm trying to show bootstrap popover on click and hover events.

I have multiple controls loaded on a page and I'm trying to bind the bootstrap-5 popover without the jQuery dependency for those controls.

In this example, I have used buttons and anchor elements and tried to bind the popover using JavaScript and the popover is getting triggered for both button and anchor elements when used the event hover (trigger: 'hover'), but for the event click(trigger: 'focus') the popover is not showing for anchor elements.

I have used the below code for binding the events to the controls.

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;
      }
    })
  });

});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<button type="button" class="btn btn-primary" people-card="click-action" email="[email protected]">
  Show Card on Click
</button>

<button type="button" class="btn btn-primary" people-card="hover-action" email="[email protected]">
  Show Card on Hover
</button>

<br>
<br>

<ul>
  <li>
    <a class="people-card" people-card="click-action" email="[email protected]">Show Card on Click</a>
  </li>
  <li>
    <a class="people-card" people-card="hover-action" email="[email protected]">Show Card on Hover</a>
  </li>
</ul>

<br>
<br>

<button type="button" class="btn btn-primary" people-card="click-action" email="[email protected]">
  Show Card on Click
</button>

<button type="button" class="btn btn-primary" people-card="hover-action" email="[email protected]">
  Show Card on Hover
</button>


<div id="popover-content" style="display:none">
  <p>test</p>
</div>

Can someone help me here to make the click event(trigger: 'focus') work for even anchor tags.

Answer 1

So it appears that adding href attribute solves this problem. Alternatively, you could trigger it yourself using show method of the tooltip, whenever your element is clicked.

Don't forget to preventDefault() if needed.

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/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>


<ul>
  <li>
    <a href="#" class="people-card" people-card="click-action" email="[email protected]">Show Card on Click</a>
  </li>
  <li>
    <a class="people-card" people-card="hover-action" email="[email protected]">Show Card on Hover</a>
  </li>
</ul>


<div id="popover-content" style="display:none">
  <p>test</p>
</div>