Bootstrap popover align in middle

Question

I am making an interactive svg map with highlights. Now I am using the bootstrap popover but it is aligned above the svg. What I want is to place it direct over the svg in the middle or something.

Here is an FIDDLE to see how its build up.

As you can see in the Fiddle i trigger the popover on the svg element.

How do I acces this specific popover? I was thinking like this:

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

But than it is setting top to 100px when you click the second time (when its closing)

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