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%);
    }`