I have an OverlayTrigger
wrapping a Popover
that contains some form inputs and a Button
to save the data and close.
save(e) {
this.setState({ editing: false })
this.props.handleUpdate(e);
}
render() {
return (
<OverlayTrigger trigger="click"
rootClose={true}
onExit={this.save.bind(this) }
show={this.state.editing}
overlay={
<Popover title="Time Entry">
<FormGroup>
<ControlLabel>Data: </ControlLabel>
<FormControl type={'number'}/>
</FormGroup>
<Button onClick={this.save.bind(this) }>Save</Button>
</Popover>
}>
I have rootClose = true
, and my callback gets executed onExit
, but I don't see a way to manually close overlay. I'm trying to use the show
attribute from the Bootstrap Modal
that (predictably) doesn't work.
Use Focus Trigger to Dismiss Popover Use the focus trigger instead. 1... 2<OverlayTrigger trigger="focus" placement="right" overlay={popover}> 3... This will close the popover when the user clicks outside of it.
We can use the following approach in ReactJS to use the react-bootstrap Popover Component. Popover Props: arrowProps: It is used to position the popover arrow. content: It is used to create a Popover with a Popover.
OverlayTrigger Component helps with common use-cases into our Overlay components. It positions itself with the help of ref and style prop for our overlay component.
We can use the following approach in ReactJS to use the react-bootstrap Tooltip Component. Tooltip Props: arrowProps: It is used to position the tooltip arrow. id: It is just an HTML id attribute that is necessary for accessibility.
Hide function is not a public function on OverlayTrigger. Set <OverlayTrigger rootClose={true}...
and then on your onClick
event trigger call document.body.click()
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With