How to use reactstrap popover on hover?

Question

I am new to the react . Here I am using a library called reactstrap, In which ,

import React from 'react';
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      popoverOpen: false
    };
  }

  toggle() {
    this.setState({
      popoverOpen: !this.state.popoverOpen
    });
  }

  render() {
    return (
      <div>
        <Button id="Popover1" type="button">
          Launch Popover
        </Button>
        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
          <PopoverHeader>Popover Title</PopoverHeader>
          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
        </Popover>
      </div>
    );
  }
}

Now, Here what I am trying is when user hover on that button itself then only user should be able to see that popover. SO is there any way through which we can use this on hover itself ?

Answer 1

For this, you can use the onMouseEnter and onMouseLeave events:

<Button
   id="Popover1"
   type="button"
   onMouseEnter={this.onHover}
   onMouseLeave={this.onHoverLeave}
>
    Launch Popover
</Button>

And the methods should look like:

onHover() {
  this.setState({
    popoverOpen: true,
  })
}

onHoverLeave() {
  this.setState({
    popoverOpen: false,
  })
}

Demo