How to control the arrow position in bootstrap 4

Question

I am trying to use popover in bootstrap 4. The switch button that I set in the upper right corner.

first, if I set the popover to the button:

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

a popup will be displayed with a part off the screen, like:

then I try to use 'auto' instead of 'bottom' in the placement, but in this case the popup does not work ...

after that I use 'bottom' again in the layout and use offset to move the popover 50px to the left and increase the width of the popover:

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

CSS:

.popover-content{
width: 270px;
}    

then popover show like this:

now the position of the arrow of the popover is not in place, I'm trying to move the position of the arrow with the help of the event '' selected.bs.popover ', for example:

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

but it does not work ....

- , , ?

.

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

, React-Bootstrap v1, Bootstrap 4 , :

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(){
});

css .popover:

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

? , , / , css . CSS -. :

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

. , .

CSS .popover CSS !important .popover, :

.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);
});