ReactBootstrap popover dismiss on click outside

Question

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).

Is there a way to do this using ReactBootstrap or do I need to custom code something?

JSfiddle of a popover: http://jsfiddle.net/226cwe4e/

React.createClass({
    render: function() {
        return <ReactBootstrap.OverlayTrigger trigger="click" placement="bottom" overlay={<ReactBootstrap.Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</ReactBootstrap.Popover>}>
        <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>
      </ReactBootstrap.OverlayTrigger>;
    }
});

Answer 1

No you don't need any custom code. Just include rootClose prop and this will do for you. Its in the react bootstrap official documentation https://react-bootstrap.netlify.com/components/overlays/#overlays-api

<OverlayTrigger trigger='click' rootClose>
  ....
</OverlayTrigger>