Bootstrap popover在中间对齐

Question

我正在制作一个带有亮点的交互式svg地图。 现在我使用bootstrap popover，但它在svg上方对齐。 我想要的是将它直接放在中间的svg上。

这是一个FIDDLE ，看看它是如何构建的。

正如您在小提琴中看到的那样，我在svg元素上触发弹出窗口。

如何访问此特定弹出框？ 我这样想：

$('svg').click(function(){
    $('div').find('.popover').css('top', '100px','!important');
})

但是当你第二次点击时（当它关闭时）将顶部设置为100px

Answer 1

我已经准备好找到解决方案将svg包装在div中并给它一个position: relative和display: inline-block不是给popover class:

.popover {
        .pos-t-l(50%, 50%) !important; (mixin position top-left)
        .translate(-50%; -50%);
    }`