Скрыть все всплывающие окна при модальном открытии ⇐ Html

[Anonymous]

Я использую Bootstrap 5.3.2 с веб-пакетом 5.88.2. У меня есть куча всплывающих окон и несколько модальных окон, и я просто хочу, чтобы все всплывающие окна закрывались при открытии определенного модального окна, чтобы всплывающие окна не отображались поверх модального окна. Обычно одновременно должен быть открыт только один всплывающий элемент, поэтому теоретически мне нужно закрыть только один из них, но мне кажется безопаснее убедиться, что они все закрыты.
Модальное окно запускается при нажатии каждого .special-button-js, а всплывающее окно запускается при наведении каждого .special-button-js. Это означает, что на мобильных устройствах и модальное окно, и всплывающее окно открываются при нажатии .special-button-js. Наверное, это кажется странным, но я хочу именно так. Вот мой js:

Код: Выделить всё

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

И мой HTML:

Код: Выделить всё

Special Button

...

Поповеры и модальные окна открываются и закрываются, как и ожидалось, за исключением того, что моя попытка скрыть всплывающие окна при открытии модального окна не работает. Консольной ошибки нет, она просто не скрывает всплывающие окна. Кто-нибудь знает, что я делаю не так?
Примечание: я где-то читал, что $('.special-button-js').popover('hide'); может все еще работать, хотя jQuery больше не является обязательным требованием для Bootstrap, но это тоже не сработало.

Подробнее здесь: https://stackoverflow.com/questions/772 ... modal-open