I was using bootstrap 3 and 4 and wanted to close all popovers when user clicked anywhere else on the page. I used https://stackoverflow.com/a/21007629/166231 (and 3rd comment) as a guide to implement a solution.
const hideVisiblePopover = function(): void {
const visiblePopover = KatApp[ "visiblePopover" ];
// Just in case the tooltip hasn't been configured
if ( visiblePopover === undefined || $(visiblePopover).data("bs.popover") === undefined ) return;
// Call this first b/c popover 'hide' event sets visiblePopover = undefined
if ( that.bootstrapVersion == 3 ) {
$(visiblePopover).data("bs.popover").inState.click = false
}
$(visiblePopover).popover("hide");
};
And my event handlers I set up on the div
container of all my markup are:
application.element
.on("show.bs.popover.RBLe", function() { hideVisiblePopover(); })
.on("shown.bs.popover.RBLe", function( e ) {
KatApp[ "visiblePopover"] = e.target;
})
.on("hide.bs.popover.RBLe", function() {
KatApp[ "visiblePopover"] = undefined;
});
However, with bootstrap 5, my attempt to get the bs.popover
with this line:
$(visiblePopover).data("bs.popover")
Returns undefined. Is there a different place to look for this now?
For anyone that finds this, I solved by using:
bootstrap.Popover.getInstance(visiblePopover)