title: Using Bootstrap Popovers in React without JSX
body: <p>I'm trying to re-create this example without JSX:</p>
  
  <p><a href="http://react-bootstrap.github.io/components.html#popovers-overlay-trigger" rel="nofollow">http://react-bootstrap.github.io/components.html#popovers-overlay-trigger</a></p>
  
  <p>In particular, this line is causing me a headache:</p>
  
  <pre><code> &lt;OverlayTrigger trigger='click' placement='left' overlay={&lt;Popover title='Popover left'&gt;&lt;strong&gt;Holy guacamole!&lt;/strong&gt; Check this info.&lt;/Popover&gt;}&gt;
        &lt;Button bsStyle='default'&gt;Holy guacamole!&lt;/Button&gt;
   &lt;/OverlayTrigger&gt;
  </code></pre>
  
  <p>and my (more verbose) version:</p>
  
  <pre><code>React.createElement("div", {id:"some_id"},
      React.createElement(ReactBootstrap.OverlayTrigger, {container:"#some_id" , trigger:'click', placement:'left', overlay:
          React.createElement(ReactBootstrap.Popover, {'title':'Popover left'},
              React.createElement("strong", {}, "Check this info.")
          )
      })
  )
  </code></pre>
  
  <p>The keyword "overlay" has me confused, as I'm not clear on how to rewrite it. I'm also unclear as to how to properly attach the mountNode to the parent div element, "#some_id". document.getElementbyId() doesn't work.</p>
  
  <p>This is the error message I get when running the above:</p>
  
  <pre><code>Uncaught Error: Invariant Violation: onlyChild must be passed a children with exactly one child.
  </code></pre>