引导弹出框在中间对齐

Question

我正在制作一个带有突出显示的交互式 svg 地图。现在我正在使用引导弹出框，但它在 svg 上方对齐。我想要的是将其直接放在中间的 svg 或其他东西上。

这是一个小提琴，看看它是如何建立的。

正如您在小提琴中看到的那样，我在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%);
    }`