Within my HTML document, there is a parent <span> element that contains nested <em> elements. This <span> is styled with a specified width and display:block property using CSS.
Despite a jQuery trigger event being successfully fired on the parent <span>, I have encountered an issue where rolling over one of the child elements triggers the mouse out event, causing my Twitter Bootstrap popover to disappear.
Is there a method to "hide" the child elements in order to prevent this unwanted behavior?
/*** UPDATE WITH CODE SAMPLE **/ Unfortunately, the stopPropagation() method does not resolve this issue.
$("#div").on('mouseover', '.badge', function () {
//prevent child items from closing our popover
$(this).on('mouseenter', 'em', function (e) {
e.stopPropagation();
})
$(this).popover({
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
title: 'Title',
content:"Some content",
html: true,
placement: 'auto',
trigger:'manual'
});
$(this).popover('show');
});