add tooltip

package.json

@@ -6,7 +6,8 @@
     "axios": "^0.17.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-scripts": "1.1.1"
+    "react-scripts": "1.1.1",
+    "react-tooltip": "^3.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Grid.js

@@ -1,11 +1,26 @@
 import * as React from "react";
+import ReactTooltip from "react-tooltip";
 import "./Grid.css";
 
 const Grid = props => {
   const listItems = props.list.map(item => {
     return (
       <li key={item.id}>
-        <img src={item.url} className="cover" alt={item.word} />
+        <img
+          src={item.url}
+          className="cover"
+          alt={item.word}
+          data-tip
+          data-for={String(item.id)}
+        />
+        <ReactTooltip
+          id={String(item.id)}
+          place="top"
+          type="dark"
+          effect="float"
+        >
+          <span>{item.word}</span>
+        </ReactTooltip>
       </li>
     );
   });

yarn.lock

@@ -1330,6 +1330,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 [email protected]:
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
@@ -5200,6 +5204,13 @@ [email protected]:
   optionalDependencies:
     fsevents "^1.1.3"
 
+react-tooltip@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.4.0.tgz#037f38f797c3e6b1b58d2534ccc8c2c76af4f52d"
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"