当用户向下滚动并单击元素时，Bootstrap popover会浮动

Question

我使用bootstrap popover作为SVG元素。一切都很好，除了用户向下滚动一点并希望通过点击看到弹出框的时间。浮子浮出水面显示元素

这是我的SVG元素：

<div id="svg-container">
    <svg>
        <g id="B2" class="blockgroup">
            <path id="B2_Block" class="block" d="M195.4,128.9c-28,18.2-51.9,42.2-70.1,70.2l33.3,19.3c14.8-22.6,34-42,56.5-57L195.4,128.9z"/>
            <text id="B2_Text" transform="matrix(1 0 0 1 166.0186 177.8625)" class="text">B2</text>
        </g>
    </svg>
</div>

这是css：

#svg-container {
    width:800px;
    margin:150px auto 0;
    position: relative;
}

以下是弹出选项：

$('.blockgroup').on('click', function(e){

    var _this = $(this);

    $(_this).addClass('selected').promise().done(function() {
        $(_this).popover('show');
    });

}).popover({
    html: true,
    animation: true,
    container:'body',
    trigger: 'manual',
    placement: 'top',
    content: function(){
       return '<div class="popover-box">' +
                  '<span>Block</span>' +
                  '<h3>' + $(this).attr('data-block-label') + '</h3>' +
                  '<a href="#" class="view-seats" data-block-id="' + this.id + '">View Seats</a>' +
              '</div>';
    }

});

这是理想的结果：

这就是当用户向下滚动然后点击路径以查看弹出窗口时（当弹出窗口显示并且用户向下滚动时它没有浮动（可以）） ：

我尝试将container选项更改为'#svg-container'或'#' + $(this).attr('id')更改为元素的ID，但它再次没有帮助。

我做错了什么？