I want to keep the popover showing even when I hover on the popover. I already read this question How can I keep bootstrap popover alive while the popover is being hovered, however in my case I use svg
instead of html
. Below is my current approach:
HTML:
<svg>
<circle id = "born" class = "medium" cx = "55%" cy = "60%" r = "15%" stroke = "lightblue" stroke-width = "0.5%" fill = "url(#born)"/>
<svg>
jQuery:
$.fn.popover.Constructor.DEFAULTS.trigger = "hover"; // Set the default trigger to hover
$.fn.popover.Constructor.DEFAULTS.placement = 'right'; // Set the default placement to right
$.fn.popover.Constructor.DEFAULTS.html = true;
$.fn.popover.Constructor.DEFAULTS.container = "body";
$("circle#born").popover({
title: "My Hello World!",
content: "I was born in Tulung Agung, Indonesia. Back then, my mom presumed my mole as dirt, later on she realized that it would be my unique identifier."
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(this).parents("body").find(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$("body .popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
For further detail, check out my Fiddle.. Thank you in advance..