title: Prevent off-screen popovers by changing the arrow position
body: <h2>Summary</h2>
  
  <p>I want to shift horizontally <code>ng-bootstrap</code> popovers that are off-screen.</p>
  
  <p>Stackblitz:
  <a href="https://stackblitz.com/edit/angular-xt18mj" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-xt18mj</a></p>
  
  <h2>Background</h2>
  
  <p>I am using <code>ng-bootstrap</code> (Bootstrap 4 widgets for angular). My app contains a toolbar which contains several buttons. Each button is a popover: click on it and the corresponding content is displayed under the button, as shown below.</p>
  
  <p>Screenshot: <a href="https://i.imgur.com/hW8JhMW.png" rel="nofollow noreferrer">https://i.imgur.com/hW8JhMW.png</a></p>
  
  <h2>Issue</h2>
  
  <p>However, the left pop-over is off-screen. In raw Bootstrap 4, Popper.js would have noticed it and displayed the popover on the right. This bug has been reported <a href="https://github.com/ng-bootstrap/ng-bootstrap/issues/2924" rel="nofollow noreferrer">here</a>.</p>
  
  <p>But I don't want this behavior because I want the popover to stay under the toolbar.</p>
  
  <p>What I want is finding a way to shift the popover to the right, keeping the arrow under the button, like this:
  <a href="https://i.imgur.com/u0HqiPS.png" rel="nofollow noreferrer">https://i.imgur.com/u0HqiPS.png</a></p>
  
  <p>I updated the CSS of the popover (<code>ngb-popover-window</code>) this way:</p>
  
  <pre><code>element.style {
      top: 54px;
      // left: -80px;
      left: 0px !important;
  }
  </code></pre>
  
  <p>This correctly aligns the popover with its parent (which is <code>relative</code> positioned).</p>
  
  <p>Screenshot: <a href="https://i.imgur.com/O2WcDrz.png" rel="nofollow noreferrer">https://i.imgur.com/O2WcDrz.png</a></p>
  
  <p>However:</p>
  
  <ol>
  <li>The arrow is not under button 1 (it remains at 50% width)</li>
  <li>I want to apply this operation only if the popover is off-screen (in the real app, it depends of the toolbar left margin whose width is 2.5%, so not a fixed px value)</li>
  <li>Popper.js erases dynamically the <code>left: 0px !important;</code> value even if <code>!important</code> is added and sets it back to a computed value.</li>
  </ol>