I'm exploring ways to implement bootstrap popovers that respond to both click and hover events without relying on jQuery. I have a variety of controls on my page and I want to bind popovers to them using JavaScript.
While testing with buttons and anchor elements, I discovered that the popover triggers successfully for both types when using the 'hover' event, but it fails to show up for anchor elements when using the 'click' event.
Below is the code snippet I used to bind the events to the controls:
document.addEventListener("DOMContentLoaded", function(event) {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'focus',
content: function() {
return document.getElementById('popover-content').outerHTML;
}
})
});
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="hover-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'hover',
content: function() {
return document.getElementById('popover-content').outerHTML;
}
})
});
});If anyone has insights on how to make the click event ('focus') work for anchor tags as well, your help would be greatly appreciated!