javascript - Bootstrap popover align in middle -

i making interactive svg map highlights. using bootstrap popover aligned above svg. want place direct on svg in middle or something.

here fiddle see how build up.

as can see in fiddle trigger popover on svg element.

how acces specific popover? thinking this:

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

but setting top 100px when click second time (when closing)

i ready found solution wrap svg in div , give position: relative , display: inline-block give popover class:

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

Addrety