title: How to control popover-arrow position in bootstrap 4
body: <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>