Currently, I have implemented Bootstrap Popover with HTML content using the code snippet below. This code is based on the answer provided at .
$(".song-status-link").popover({
html: true,
placement: 'bottom',
content: function () {
return $("#song-status-popover").html();
}
});
In order to close the popover when clicking outside of it, I have included the following code:
$('html').on('mouseup', function (e) {
if (!$(e.target).closest('.popover').length) {
$('.popover').each(function () {
$(this).closest('div.popover').popover('hide');
});
}
});
Although the current setup works well, I am encountering an issue when trying to open the popover again after closing it by clicking outside. It requires two clicks on the link to open the popover again.
I am seeking assistance in identifying what might be missing or causing the popover not to open in a single click after being closed by an external click. Any help would be appreciated!
UPDATE: My theory is that even though clicking outside hides the popover, Bootstrap still registers it as open. Hence, on the first click after closure, it assumes the popover is already closed, taking a second click to actually open it.