Add tooltip to copy button

3 files changed, 43 insertions, 10 deletions

diff --git a/package.json b/package.json
index cafca2672..efa652730 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "react-dom": "^15.0.2",
     "react-hyperscript": "^2.2.2",
     "react-redux": "^4.4.5",
+    "react-tooltip-component": "^0.3.0",
     "readable-stream": "^2.1.2",
     "redux": "^3.0.5",
     "redux-logger": "^2.3.1",
diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
index 1fdc3f822..182d7a670 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@@ -3,6 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
 
+const Tooltip = require('react-tooltip-component')
+
 module.exports = CopyButton
 
 inherits(CopyButton, Component)
@@ -10,22 +12,51 @@ function CopyButton () {
   Component.call(this)
 }
 
+// As parameters, accepts:
+// "value", which is the value to copy (mandatory)
+// "title", which is the text to show on hover (optional, defaults to 'Copy')
 CopyButton.prototype.render = function () {
   const props = this.props
+  const state = this.state || {}
+
   const value = props.value
+  const copied = state.copied
+
+  const message = copied ? 'Copied' : props.title || ' Copy '
 
-  return h('i.fa.fa-clipboard.cursor-pointer.color-orange', {
-    title: props.title || 'Copy',
+  return h('.copy-button', {
     style: {
       display: 'flex',
-      justifyContent: 'center',
       alignItems: 'center',
-      margin: '5px',
     },
-    onClick: (event) => {
-      event.preventDefault()
-      event.stopPropagation()
-      copyToClipboard(value)
-    },
-  })
+  }, [
+
+    h(Tooltip, {
+      position: 'top',
+      title: message,
+    }, [
+      h('i.fa.fa-clipboard.cursor-pointer.color-orange', {
+        style: {
+          margin: '5px',
+        },
+        onClick: (event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          copyToClipboard(value)
+          this.debounceRestore()
+        },
+      }),
+    ]),
+
+  ])
+}
+
+CopyButton.prototype.debounceRestore = function() {
+
+  this.setState({ copied: true })
+  clearTimeout(this.timeout)
+  this.timeout = setTimeout(() => {
+    this.setState({ copied: false })
+  }, 850)
+
 }
diff --git a/ui/css.js b/ui/css.js
index f6abb0d7a..01f317acd 100644
--- a/ui/css.js
+++ b/ui/css.js
@@ -9,6 +9,7 @@ var cssFiles = {
   'lib.css': fs.readFileSync(path.join(__dirname, '/app/css/lib.css'), 'utf8'),
   'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'),
   'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'),
+  'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'),
 }
 
 function bundleCss () {