Merge pull request #42 from juliaevk/bg-switcher-value-on-hover-33

Show background switcher value on hover
nakulrathore · Oct 8, 2019 · a719cd8 · a719cd8
2 parents 3b598aa + fc242f2
commit a719cd8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
     "color": "^3.1.2",
     "react": "^15.6.2",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "react-tooltip": "^3.11.1"
   },
   "devDependencies": {
     "react-scripts": "1.0.7"

diff --git a/src/components/ColorList/ColorList.js b/src/components/ColorList/ColorList.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Color from "color";
 import COLORS from "../../colors";
+import ReactTooltip from 'react-tooltip';
 
 const ColorList = ({colors,
                    selectedColor,
@@ -19,12 +20,14 @@ const ColorList = ({colors,
 
               onColorChange(colorItem.color);
             }}
+            data-tip={ colorItem.color }
             className={`color-list__button ${selectedColor === colorItem.color ? 'color-list__button--selected' : ''}`}
             style={{
               background: colorItem.color,
               color: isDarkColorSelected ? COLORS.WHITE : COLORS.BLACK
             }}
           > </button>
+          <ReactTooltip place="top" type="dark" effect="solid"/>
         </li>
       )}
     </ul>