title: ReactBootstrap popover dismiss on click outside
body: <p>ReactBootstrap provides a popover control. I would like this to be dismissed on clicking outside the popover in a similar way to how modals work (it just dismisses by default clicking out of the box).</p>
  
  <p>Is there a way to do this using ReactBootstrap or do I need to custom code something?</p>
  
  <p>JSfiddle of a popover: <a href="http://jsfiddle.net/226cwe4e/" rel="noreferrer">http://jsfiddle.net/226cwe4e/</a></p>
  
  <pre><code>React.createClass({
      render: function() {
          return &lt;ReactBootstrap.OverlayTrigger trigger="click" placement="bottom" overlay={&lt;ReactBootstrap.Popover title="Popover bottom"&gt;&lt;strong&gt;Holy guacamole!&lt;/strong&gt; Check this info.&lt;/ReactBootstrap.Popover&gt;}&gt;
          &lt;ReactBootstrap.Button bsStyle="default"&gt;Holy guacamole!&lt;/ReactBootstrap.Button&gt;
        &lt;/ReactBootstrap.OverlayTrigger&gt;;
      }
  });
  </code></pre>