title: How does the ReactBootstrap OverlayTrigger container property work?
body: <p>I have a popover inside OverlayTrigger. </p>
  
  <p>I define it as</p>
  
  <pre><code>const myOverlayTrigger = &lt;ReactBootstrap.OverlayTrigger 
      placement='bottom' overlay={&lt;ReactBootstrap.Tooltip&gt;...&lt;/ReactBootstrap.Tooltip&gt;}&gt;
      {myContent}
    &lt;/ReactBootstrap.OverlayTrigger&gt;;
  </code></pre>
  
  <p>Then I render it inside one of my elements like that:</p>
  
  <pre><code>&lt;li&gt;{myOverlayTrigger}&lt;/li&gt;
  </code></pre>
  
  <p>I want to render OverlayTrigger itself inside <code>&lt;li&gt;</code> but it renders inside body, as defined in documentation. I'm trying to use container attribute to render it inside parent <code>&lt;li&gt;</code>. </p>
  
  <p>First, I tried to assign ID to <code>&lt;li&gt;</code> and pass this ID as a string to container=... (which isn't a best way).</p>
  
  <p>Second, I tried to create additional element <code>&lt;span&gt;&lt;/span&gt;</code> and render it inside <li> along with {myOverlayTrigger}. Also I pass it (assigned to variable) to container attribute</p>
  
  <pre><code>const c = &lt;span&gt;&lt;/span&gt;;
  ... container={c} ...
  &lt;li&gt;{c} {myOverlayTrigger}&lt;/li&gt;
  </code></pre>
  
  <p>Both approaches consistently gives an error <code>not a dom element or react component</code>. </p>
  
  <p>Obviously assigning <code>&lt;li&gt;...&lt;/li&gt;</code> itself as a container doesn't work either as it being defined <em>after</em> myOverlayTrigger is defined.</p>
  
  <p>Question: how to use it right?</p>