import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./style.css";

class ToolTip extends Component {
  state = { isOpen: false };
  handleHover(isOpen) {
    this.setState({ isOpen });
  }
  render() {
    return (
      <div
        style={{ position: "relative" }}
        onMouseOver={this.handleHover.bind(this, true)}
        onMouseOut={this.handleHover.bind(this, false)}
      >
        <div>Hover Over Me</div>
        {this.state.isOpen && (
          <div
            style={{
              position: "absolute",
              top: "-100%",
              backgroundColor: "yellow",
              padding: "0.5rem",
              pointerEvents: "none"
            }}
          >
            I'm a hovering Tooltip!
          </div>
        )}
      </div>
    );
  }
}

class ContextMenu extends Component {
  state = { isOpen: false };
  handleContextMenu = e => {
    e.preventDefault();
    this.setState({ isOpen: true });
  };
  handleBlur = () => {
    this.setState({ isOpen: false });
  };
  render() {
    return (
      <div style={{ position: "relative" }}>
        <div
          onContextMenu={this.handleContextMenu}
          onBlur={this.handleBlur}
          style={{ userSelect: "none" }}
          tabIndex="-1"
        >
          Right-Click on Me
        </div>
        {this.state.isOpen && (
          <div
            style={{
              position: "absolute",
              top: "-100%",
              backgroundColor: "lightgray",
              padding: "0.5rem",
              pointerEvents: "none"
            }}
          >
            I'm a Context Menu (click away to close)
          </div>
        )}
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <ToolTip />
      <ContextMenu />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

{
  "name": "@plnkr/starter-react",
  "version": "1.0.2",
  "description": "React starter template",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "plnkr": {
    "runtime": "system",
    "useHotReload": true
  }
}

html,
body,
#root {
  height: 100%;
}

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  height: 100%;
}