When using bootstrap popover, everything works fine except for the fact that when hovering outside the div area, the popup still appears. Changing the div to a button resolves this issue. Any suggestions?
If you want to see a Demo, hover outside the red div area and notice how the popover shows up.
CSS
.test {
width:100px;
height:100px;
background:red;
}
HTML
<a title="some title" class="infopop" rel="popover" data-content="some content"><div class="test">Hover over me!</div></a>
JavaScript
$('.infopop').popover({
html: true,
trigger: 'manual',
container: $(this).attr('id'),
placement: 'right',
content: function () {
$return = '<div class="hover-hovercard"></div>';
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(this).siblings(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});