title: Have React bootstrap component (popover) change position automatically
body: <p>I am currently using <a href="https://react-bootstrap.github.io/" rel="noreferrer">React Bootstrap</a> to add Bootstrap React components to my app. </p>
  
  <p>When the user clicks on the button, a popup appears, allowing the user to add an item to a list. It looks like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/0Ay8u.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0Ay8u.png" alt="enter image description here"></a> </p>
  
  <p>When the user types in the input box and presses "Add", it adds a row to the div that the button is in. However, because the popover is added to the very end of <code>&lt;body&gt;</code>, the popover does not move as the number of rows increases. It looks like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/YcdZz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YcdZz.png" alt="enter image description here"></a></p>
  
  <p>The applicable code looks like the following:</p>
  
  <pre><code>&lt;OverlayTrigger trigger="click" placement="top" overlay={this.generatePopover()}&gt;
    &lt;Button bsSize="lg"&gt; Add Income Source&lt;/Button&gt;
  &lt;/OverlayTrigger&gt;
  </code></pre>
  
  <p>where <code>this.generatePopover()</code> makes use of the <code>&lt;Popover&gt;</code> component.</p>