react-popover onMouseEnter/onMouseLeave example

react-popover_onMouseEnter_onMouseLeave_example.jsx

import React from 'react';
import Popover from 'react-popover';

class HelloWorld extends React.Component {
  constructor() {
    super();
    this.showPopover = this.showPopover.bind(this);
    this.hidePopover = this.hidePopover.bind(this);
    this.trackMouse = this.trackMouse.bind(this);
    this.untrackMouse = this.untrackMouse.bind(this);
    this.state = {
      isOpen: false,
      mouseTracked: false,
    };
  }

  showPopover() {
    this.setState({ isOpen: true });
  }

  hidePopover() {
    this.setState({ isOpen: false });
  }

  trackMouse() {
    this.setState({ mouseTracked: true });
    if (!this.state.isOpen) {
      this.showPopover();
    }
  }

  untrackMouse() {
    this.setState({ mouseTracked: false });
    setTimeout(() => {
      if (!this.state.mouseTracked) {
        this.hidePopover();
      }
    }, 100);
  }

  render() {
    const popoverBody = (
      <div onMouseEnter={this.trackMouse} onMouseLeave={this.untrackMouse}>
        {'Hello World!'}
      </div>
    );
  
    return (
      <Popover body={popoverBody} isOpen={this.state.isOpen}>
        <div onMouseEnter={this.trackMouse} onMouseLeave={this.untrackMouse}>
         {'Greet the world...'}
        </div>
      </Popover>
    );
  }
}

export default HelloWorld;