如何控制bootstrap 4中的popover-arrow位置

Question

我试图在bootstrap 4中使用popover。我在右上角设置了切换按钮。

首先，如果我在按钮上设置弹出窗口：

    $(function () {
$('[data-toggle="popover"]').popover({
placement: 'bottom'
})

弹出窗口将显示屏幕上的部分内容，如：

然后我尝试使用＆＃39; auto＆＃39;而不是＆＃39;底部＆＃39;在展示位置，但在这种情况下，弹出窗口不起作用...

之后我使用＆＃39; bottom＆＃39;再次放置并使用偏移将popover 50px向左移动并增加popover的宽度：

$('[data-toggle="popover"]').popover({
placement: 'bottom',
offset: '0 50px'
})

的CSS：

.popover-content{
width: 270px;
}    

然后像这样的popover节目：

现在，弹出箭头位置放错地方，我尝试使用＆＃39; shows.bs.popover＆＃39;移动箭头位置。事件如：

 $('[data-toggle="popover"]').on('shown.bs.popover', function () {
 $('.popover.bottom .popover-arrow:after').css('right', 50 + 'px');
});

但它不起作用......

有人知道如何移动箭头位置或在出现时隐藏箭头吗？

提前致谢。

Answer 1

您可以使用以下样式调整箭头的位置：

Bootstrap 3

.popover.bottom > .arrow {
    margin-left: 50px;
}

Bootstrap 4

.popover.bs-tether-element-attached-top::after,
.popover.bs-tether-element-attached-top::before{
    left: 65%;
}

Answer 2

可能尝试使用Bootstrap 4的React-Bootstrap v1 的用户引导弹出箭头，您可以使用以下类定位来调整箭头的位置：

React-Bootstrap v1.0.0-beta.5

.popover .arrow::after,
.popover .arrow::before {
  left: 104px;
}

Answer 3

对于Bootstrap 4，这是我的解决方法。

因此，在JQuery中，您将监听show.bs.popover事件，如下所示：

$('#element-id').on('show.bs.popover', function(){
});

然后，在该事件内，对引导.popover元素执行css更改代码：

$('.popover').css('left', '65%');

不起作用？可能是因为更改代码恰好在元素被创建/显示在页面中之前触发，所以css适用于缺少的元素。尝试将CS​​S变更代码置于超时中。最终代码如下所示：

$('#element-id').on('show.bs.popover', function(){
  setTimeout(function(){
    $('.popover').css('left', '65%');
  }, 1);
});

我的答案适用于特定弹出窗口。我猜你可以从这里解决。

另一种选择是使用.popover为CSS文件中的!important元素添加CSS规则，例如：

.popover { left: 65% !important; }

Answer 4

我确实喜欢以下内容。

$('[data-toggle="popover"]').on('show.bs.popover', function () {
setTimeout(function () {
    $('.popover.fade.show').each(function () {
        var $this = $(this);
        if (!$this.hasClass('left-loaded')) {
            $this.addClass('left-loaded')
            var $left = parseInt($('.arrow', $this).css('left')) + parseInt(25) + "px"; 
           // change 25 as per your need
            $this.find('.arrow').css('left', $left);
        }
    })

}, 100);
});