title: How to position the popper arrow automatically when there is no space in viewport horizontally and vertically?
body: <p>I am trying to display a popup with the popper arrow and where ever we move around the screen the popup and the arrow should display properly.</p>
  <p>If there is enough width and height in viewport popper and popup works perfectly.</p>
  <p>Failure case -
  If there is no space then popper arrows not working properly and it shows a random position.</p>
  <p>Expected Result -
  If there is no vertical or horizontal space in viewport popper should automatically adjust the position and display above the selected DOM.</p>
  <p>Popup dimension-
  width - 440px ,height = 400px
  popper position is set to left.</p>
  <p>Code HTML.</p>
  <pre><code>&lt;div class=&quot;popup id='popup&gt;
  &lt;div id=&quot;arrow&quot; data-popper-arrow&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.popup{
  width:440px;
  height:400px;
  }
  #arrow{
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: -1;
  transform: rotate(45deg);
  background:white;
  }
  
  
    #popup[data-popper-placement^='top'] &gt; #arrow{
      bottom: -4px;
    }
    
    #popup[data-popper-placement^='bottom'] &gt; #arrow{
      top: -4px;
    }
    
    #popup[data-popper-placement^='left'] &gt; #arrow{
      right: -4px;
    }
    
    #popup[data-popper-placement^='right'] &gt; #arrow{
      left: -4px;
    }
  </code></pre>
  <p>Popper code</p>
  <pre><code>createPopper(elementSel, popup, {
              placement: position,
              modifiers: [
                  {
                      name: 'offset',
                      options: {
                          offset: [0, 12]
                      }
                  }
              ]
          });
  </code></pre>