Luke McGregor Luke McGregor - 8 months ago 112
React JSX Question

ReactBootstrap popover dismiss on click outside

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:

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>


I think this should work for you:

const Hello = () => (
      <ReactBootstrap.Popover title="Popover bottom">
        <strong>Holy guacamole!</strong> Check this info.   
    <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>

ReactDOM.render(<Hello />, document.getElementById('app'));

Here is jsfiddle