How to control popover-arrow position in bootstrap 4
<p>I am trying to use popover in bootstrap 4.The toggle button I set in on the top right corner.</p>

<p>first if I set the popover on the buttom:</p>

<pre><code>    $(function () {
$('[data-toggle="popover"]').popover({
placement: 'bottom'
})
</code></pre>

<p>the popover will be displayed with part off the screen like:</p>

<p><a href="https://i.stack.imgur.com/ZY7PZ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ZY7PZ.jpg" alt="enter image description here"></a></p>

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

<p>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:</p>

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

<p>css:</p>

<pre><code>.popover-content{
width: 270px;
}    
</code></pre>

<p>then the popover show like this:</p>

<p><a href="https://i.stack.imgur.com/MzamR.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/MzamR.jpg" alt="enter image description here"></a></p>

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

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

<p>but it doesn't work....</p>

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

<p>Thanks in advance.</p>