在盘旋弹出窗口时继续在svg旁边显示popover

时间:2015-04-07 15:18:00

标签: jquery twitter-bootstrap svg

即使我将鼠标悬停在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 ..提前感谢您..

0 个答案:

没有答案