14-tooltip

Author: tylermcginnis

app/components/Table.jsx

@@ -1,6 +1,55 @@
 import * as React from "react";
 import PropTypes from "prop-types";
 import { hashtag } from "./icons";
+import Tooltip from "./Tooltip";
+
+function MoreInfo({
+  created_at,
+  forked_count,
+  language,
+  updated_at,
+  watchers,
+  login,
+}) {
+  return (
+    <ul className="tooltip stack">
+      <li className="split">
+        <span>By:</span> <span>{login}</span>
+      </li>
+      {language && (
+        <li className="split">
+          <span>Language:</span> <span>{language}</span>
+        </li>
+      )}
+      <li className="split">
+        <span>Created:</span>{" "}
+        <span>{new Date(created_at).toLocaleDateString()}</span>
+      </li>
+      <li className="split">
+        <span>Updated:</span>{" "}
+        <span>{new Date(updated_at).toLocaleDateString()}</span>
+      </li>
+      <li className="split">
+        <span>Watchers:</span>
+        <span>{watchers.toLocaleString()}</span>
+      </li>
+      {forked_count && (
+        <li className="split">
+          <span>Forked:</span> <span>{forked_count.toLocaleString()}</span>
+        </li>
+      )}
+    </ul>
+  );
+}
+
+MoreInfo.propTypes = {
+  created_at: PropTypes.string.isRequired,
+  language: PropTypes.string,
+  updated_at: PropTypes.string.isRequired,
+  watchers: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+  login: PropTypes.string.isRequired,
+};
 
 function TableHead() {
   return (
@@ -23,23 +72,40 @@ function TableRow({
   forks,
   open_issues,
   name,
+  created_at,
+  updated_at,
+  language,
+  watchers,
 }) {
-  const { login, avatar_url } = owner;
+  const { login, avatar_url, type } = owner;
 
   return (
     <tr>
       <td>{index + 1}</td>
       <td>
-        <div className="row gap-md">
-          <img
-            width={32}
-            height={32}
-            className="avatar"
-            src={avatar_url}
-            alt={`Avatar for ${login}`}
-          />
-          <a href={`https://github.com/${login}/${name}`}>{name}</a>
-        </div>
+        <Tooltip
+          element={
+            <MoreInfo
+              created_at={created_at}
+              language={language}
+              updated_at={updated_at}
+              watchers={watchers}
+              type={type}
+              login={login}
+            />
+          }
+        >
+          <div className="row gap-md">
+            <img
+              width={32}
+              height={32}
+              className="avatar"
+              src={avatar_url}
+              alt={`Avatar for ${login}`}
+            />
+            <a href={`https://github.com/${login}/${name}`}>{name}</a>
+          </div>
+        </Tooltip>
       </td>
       <td>{stargazers_count}</td>
       <td>{forks}</td>

app/components/Tooltip.jsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+
+const container = {
+  position: "relative",
+  display: "flex",
+};
+
+export default class Tooltip 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() {
+    const { hovering } = this.state;
+    const { children, element } = this.props;
+
+    return (
+      <div
+        onMouseOver={this.mouseOver}
+        onMouseOut={this.mouseOut}
+        style={container}
+      >
+        {hovering === true && element}
+        {children}
+      </div>
+    );
+  }
+}
+
+Tooltip.propTypes = {
+  children: PropTypes.node.isRequired,
+  element: PropTypes.node.isRequired,
+};

app/index.jsx

@@ -9,7 +9,7 @@ class App extends React.Component {
     return (
       <div className="light">
         <div className="container">
-          <Battle />
+          <Popular />
         </div>
       </div>
     );