Question 269297 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to manually hide a popover with Bootstap 5?

I am trying to create multiple Bootstrap popover instances with the ability to close all when on click.

Here is what I did

document.addEventListener('DOMContentLoaded', function () {

    var items = [];

    document.getElementById('addPopperButton', function () {
        var btn = document.createElement('button');
        btn.setAttribute('type', 'button');
        btn.innerText = 'Toggle poppver';

        var item = new bootstrap.Popover(btn, {
            trigger: 'hover click',
            title: 'lorem text',
            content: 'lorem text'
        });

        items.push(item);

        document.body.appendChild(btn);
    });

    document.getElementById('hideAllPopovers', function () {
        items.forEach(item => {
            item.popover('hide');
        });
    });

});

However this keeps giving me the following error

Uncaught TypeError: item.popover is not a function

How can I manually hide all the popover instances when the hideAllPopovers is clicked?

Tags:

2

Answers


  1. 0

    In Bootstrap 5, you can hide a popover using hide method:

    const popoverInstance = new bootstrap.Popover(triggerElement, options);

// manually hide
popoverInstance.hide()

    $().popover('hide') was used in Bootstrap v3 & 4.

    In your code, item is a popover instance, so you should replace item.popover('hide'); with item.hide();.

    document.getElementById('hideAllPopovers').addEventListener('click', () => {
  items.forEach((item) => {
    item.hide();
  });
});

    Stackblitz demo:
    https://stackblitz.com/edit/stackblitz-starters-chdxor?file=src%2Findex.js

    From Bootstrap 5 docs, hide method:

    Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

    Login or Signup to reply.
  2. 0

    From the docs one way to get an instance of a popper object for an element is like

    // getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

    Here’s a demo:

    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))


function closeAll(selector) {
  selector = selector || '[data-bs-toggle="popover"]'
  const popoverTriggerList = document.querySelectorAll(selector)
  popoverTriggerList.forEach(item => {
    const popover = bootstrap.Popover.getInstance(item)
    popover.hide()

  });

}
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>

  <button type="button" class="btn btn-sm btn-success m-2" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
  <br>
  <button type="button" class="btn btn-sm btn-success m-2" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

  <br><br>
  <button onclick="closeAll()" class="btn btn-sm btn-primary m-2">close all popovers</button>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search