CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-5popoverbootstrap-popover
RealSteel
RealSteel

Reputation: 1941

Bootstrap 5 - dynamic popover not opening once hidden

I'm trying to open a popover based on the custom selector attribute dynamically using click as trigger using the below code.

var popoverTriggerEl = $('body');
_popover = new bootstrap.Popover(popoverTriggerEl, {
  container: 'body',
  html: true,
  placement: "bottom",
  trigger: 'click',
  selector: '[people-card="click-action"]',
  customClass: 'dpn-peoplecard',
  content: function(event) {
    return 'test';
  }
});

But when I try to close the opened popover on document click using below code, the popovers are getting completely hidden and not opening on next click.

$(document).click(function(e) {
  if ($(e.target).parent().find('[people-card="click-action"]').length > 0) {
    $('[people-card="click-action"]').popover('hide');
  }
});

I have prepared a JsFiddle based on my requirement where there are two buttons with the same selector. If we try to open popover by clicking on any button for the first time, the popover is getting opened. But once the document click happens and popover is hidden, we are not able to open any popovers from other selector button clicks.

Note: I'm displaying some html content which has some click events in the bootstrap popover content.

JsFiddle Here

Please guide me on the mistake I'm doing here

Upvotes: 0

Views: 209

Answers (1)

Tom
Tom

Reputation: 5667

You should use the focus event instead of the click event (doc example) :

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button tabindex="0" type="button" id="button1" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Dismissible popover" data-bs-placement="bottom">Show Popover</button>

<button tabindex="0" type="button" id="button2" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Dismissible popover" data-bs-placement="bottom">Show Popover</button>

Upvotes: 1

Related Questions