How to control popover-arrow position in bootstrap 4

Question

I am trying to use popover in bootstrap 4.The toggle button I set in on the top right corner.

first if I set the popover on the buttom:

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

the popover will be displayed with part off the screen like:

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

after that I use 'bottom' in the placement again and use offset to move 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 the popover show like this:

now the popover-arrow position is misplaced, I try to move the arrow position with ''shown.bs.popover' event like:

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

but it doesn't work....

Does any one know how to move the arrow postion or hide the arrow when shows up?

Thanks in advance.

Answer 1

You can adjust the position of the arrow with the following styles:

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

For Bootstrap 4 here is how I worked this out.

So in JQuery you listen for the show.bs.popover event, like this:

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

then, inside that event you execute the css altering code for bootstraps .popover element:

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

Does not work? Maybe it is because the altering code fires just before the element is created/shown in the page, so the css applies to a missing element. Try placing the css altering code in a timeout. The final code would look like this:

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

My answer applies to specific popover. You can work it out from here I guess.

Another option is to add a CSS rule for the .popover element in your CSS file with !important, ex:

.popover { left: 65% !important; }