title: How to use reactstrap popover on hover?
body: <p>I am new to the react . Here I am using a library called <code>reactstrap</code>, In which ,</p>
  
  <pre><code>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 (
        &lt;div&gt;
          &lt;Button id="Popover1" type="button"&gt;
            Launch Popover
          &lt;/Button&gt;
          &lt;Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}&gt;
            &lt;PopoverHeader&gt;Popover Title&lt;/PopoverHeader&gt;
            &lt;PopoverBody&gt;Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.&lt;/PopoverBody&gt;
          &lt;/Popover&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Now, Here what I am trying is when user <code>hover</code> on that button itself then only user should be able to see that <code>popover</code>. SO is there any way through which we can use this on hover itself ?</p>