I am attempting to generate multiple Bootstrap popover instances that can all be closed with a single click.
Here is the approach I took:
document.addEventListener('DOMContentLoaded', function () {
var items = [];
document.getElementById('addPopperButton', function () {
var btn = document.createElement('button');
btn.setAttribute('type', 'button');
btn.innerText = 'Toggle popover';
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');
});
});
});
Despite my efforts, I keep encountering the following error:
Uncaught TypeError: item.popover is not a function
Is there a way for me to manually close all popover instances when the hideAllPopovers button is clicked?