16-hover

Author: tylermcginnis

app/components/Hover.jsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export default class Hover extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hovering: false,
+    };
+
+    this.mouseOver = this.mouseOver.bind(this);
+    this.mouseOut = this.mouseOut.bind(this);
+  }
+  mouseOver() {
+    this.setState({ hovering: true });
+  }
+  mouseOut() {
+    this.setState({ hovering: false });
+  }
+  render() {
+    return (
+      <div onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>
+        {this.props.children(this.state.hovering)}
+      </div>
+    );
+  }
+}

app/components/Tooltip.jsx

@@ -1,28 +1,28 @@
 import * as React from "react";
 import PropTypes from "prop-types";
-import withHover from "./withHover";
+import Hover from "./Hover";
 
 const container = {
   position: "relative",
   display: "flex",
 };
 
-class Tooltip extends React.Component {
-  render() {
-    const { children, element, hovering } = this.props;
-
-    return (
-      <div style={container}>
-        {hovering === true && element}
-        {children}
-      </div>
-    );
-  }
+export default function Tooltip({ children, element }) {
+  return (
+    <Hover>
+      {(hovering) => {
+        return (
+          <div style={container}>
+            {hovering === true && element}
+            {children}
+          </div>
+        );
+      }}
+    </Hover>
+  );
 }
 
 Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
   element: PropTypes.node.isRequired,
 };
-
-export default withHover(Tooltip);