Bootstrap popover在中间对齐

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

i all ready found the solution wrap the svg in a div and give it an position: relative and display: inline-block than give the popover class:

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