即使我将鼠标悬停在popover上,我仍希望保持popover显示。我已经阅读了这个问题How can I keep bootstrap popover alive while the popover is being hovered,但在我的情况下,我使用的是svg
而不是html
。以下是我目前的做法:
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);
});
有关详细信息,请查看我的Fiddle ..提前感谢您..