React-boostrap popover dismissal on content hover - react-bootstrap

Question

I have OverlayTrigger with trigger='hover'. Expected behaviour here would be hiding popover when I moved cursor out of it. However, library hides popover when I move cursor out of button, i.e.
<OverlayTrigger trigger='hover' placement='left' overlay={
<Popover>
... content ...
</Popover>
}>
<Button bsStyle='default'>name</Button>
</OverlayTrigger>
So, when cursor out of button on popover content (if I want to click on link there for instance) it disappears.
Any solutions for this?

Answer 1

I am just starting to learn React. My solution to this is to set trigger option as "manual", and add onMouseOver={fn} and onMouseOut={fn} to manually show and hide the PopOver content. Here is my sample code:
var popOver_timer;
var Pop = React.createClass({
mixins: [TimerMixin],
mouseOverhandler: function() {
this.clearTimeout(popOver_timer);
this.refs.pop.show();
},
mouseOuthandler: function() {
popOver_timer = this.setTimeout(
()=> {this.refs.pop.hide();},
50
);
},
render: function() {
return (
<div onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>
<OverlayTrigger ref="pop" placement="bottom" trigger="manual" container={document.body} overlay={
<Popover onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>
This Page
</Popover>}>
<a href={this.props.popUsrUrl}>
<button>PopOver</button>
</a>
</OverlayTrigger>
</div>
);
}
});
Besides react-boostrap, I also require react-time-mixin and use the react-setTimeout. It is because when your mouse moves from the button to the popover content, the onMouseOut will be triggered first, then the onMouseOver. Therefore, a time delay for onMouseOut should be set. I set it to 50 ms. Hope it helps.