Alle Popovers beim modalen Öffnen ausblenden ⇐ HTML

[Anonymous]

Ich verwende Bootstrap 5.3.2 mit Webpack 5.88.2. Ich habe eine Reihe von Popovers und einige Modals und möchte einfach, dass alle Popovers geschlossen werden, wenn ein bestimmtes Modal geöffnet wird, damit die Popovers nicht über dem Modal angezeigt werden. Normalerweise sollte jeweils nur ein Popover geöffnet sein, sodass ich theoretisch nur eines davon schließen muss, aber sicherzustellen, dass alle geschlossen sind, scheint mir einfach sicherer zu sein.
Das Modal wird beim Klicken auf jedes .special-button-js ausgelöst, und das Popover wird beim Bewegen des Mauszeigers über jedes .special-button-js ausgelöst. Das bedeutet, dass auf Mobilgeräten sowohl das Modal als auch das Popover geöffnet werden, wenn Sie auf .special-button-js tippen. Das scheint wahrscheinlich seltsam, aber ich möchte es so. Hier ist mein js:

Code: Select all

import $ from 'jquery';
import { Modal, Popover } from 'bootstrap';

// using document.body and the selector option because the elements with .special-button-js are dynamically added to the DOM
const specialPopover = new Popover(document.body, {
selector: '.special-button-js',
html: true,
trigger: 'hover',
placement: 'auto',
content: function (triggerEl) {
// using content option because I need to refer to data-specialid on the .special-button-js element triggering the popover; not detailing that here
return 'my special popover content';
}
});

const specialModalId = '#special-modal';
const specialModal = new Modal(specialModalId);

$(document).on('click', '.special-button-js', function(e) {
// also doing some stuff with data-specialid on .special-button-js here, and then...
specialModal.show();
});

document.querySelector(specialModalId).addEventListener('show.bs.modal', event => {
// my attempt at hiding all those popovers:
document.querySelectorAll('.special-button-js').forEach((el, i) => {
let popoverInstance = Popover.getOrCreateInstance(el);
popoverInstance.hide();
});
});

Und mein HTML:

Code: Select all

Special Button

...

Die Popovers und das Modal öffnen und schließen sich wie erwartet, außer dass mein Versuch, die Popovers auszublenden, wenn das Modal geöffnet wird, nicht funktioniert. Es gibt keinen Konsolenfehler, die Popover werden einfach nicht ausgeblendet. Weiß jemand, was ich falsch mache?
Randnotiz: Ich habe irgendwo gelesen, dass $('.special-button-js').popover('hide'); möglicherweise immer noch funktioniert, obwohl jQuery nicht mehr eine Voraussetzung für Bootstrap ist, aber das hat auch nicht funktioniert.