title: Allow popper to go outside the boundaries of the container
body: <p>I am using popper.js on the items in a custom-built dropdown menu (it's not a <code>&lt;select&gt;</code>). The site uses Bootstrap 4. </p>
  
  <p>My poppers look like this, <strong>but I want it to overflow outside of the scrolling container:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/6ldvn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6ldvn.png" alt="enter image description here"></a></p>
  
  <p>I want the poppers to appear on the right-hand side of the elements in the scrolling container, but they are forced to stay inside of it. The scrolling container is a <code>&lt;div&gt;</code>.</p>
  
  <p><strong>Why don't these settings allow the poppers to overflow?</strong>:</p>
  
  <pre><code>const indivOptionPopOverSettings = {
          placement: 'left',
          container: 'body',
          trigger: 'hover',
          html: true,
          modifiers: {
              preventOverflow: {
                  // tried these individually and in various combinations:
                  enabled: false,
                  boundariesElement: 'window',
                  escapeWithReference: true
              }
          }
  };
  </code></pre>