Unify tooltip styles

Made a local tooltip component for replicating our tooltip styles wherever we use tooltips.

Applied that tooltip to other items that had tooltips.

4 files changed, 59 insertions, 26 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 8a17e095a..02a807dbb 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -14,6 +14,7 @@ const TransactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 const ethUtil = require('ethereumjs-util')
 const EditableLabel = require('./components/editable-label')
+const Tooltip = require('./components/tooltip')
 
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
@@ -109,19 +110,28 @@ AccountDetailScreen.prototype.render = function () {
             value: ethUtil.toChecksumAddress(selected),
           }),
 
-          h('img.cursor-pointer.color-orange', {
-            src: 'images/key-32.png',
+          h(Tooltip, {
             title: 'Export Private Key',
-            onClick: () => this.requestAccountExport(selected),
-            style: {
-              margin: '0px 5px',
-              width: '20px',
-              height: '20px',
-              position: 'relative',
-              top: '3px',
-              right: '4px',
-            },
-          }),
+          }, [
+            h('div', {
+              style: {
+                margin: '5px',
+              },
+            }, [
+              h('img.cursor-pointer.color-orange', {
+                src: 'images/key-32.png',
+                onClick: () => this.requestAccountExport(selected),
+                style: {
+                  margin: '0px 5px',
+                  width: '20px',
+                  height: '20px',
+                  position: 'relative',
+                  top: '3px',
+                  right: '4px',
+                },
+              }),
+            ]),
+          ]),
 
         ]),
 
diff --git a/ui/app/app.js b/ui/app/app.js
index 8297ed796..525681166 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -26,6 +26,7 @@ const SandwichExpando = require('sandwich-expando')
 const MenuDroppo = require('menu-droppo')
 const DropMenuItem = require('./components/drop-menu-item')
 const NetworkIndicator = require('./components/network')
+const Tooltip = require('./components/tooltip')
 
 module.exports = connect(mapStateToProps)(App)
 
@@ -152,18 +153,19 @@ App.prototype.renderAppBar = function () {
         }, [
 
           // small accounts nav
-          h('img.cursor-pointer.color-orange', {
-            src: 'images/switch_acc.svg',
-            style: {
-              width: '23.5px',
-              marginRight: '8px',
-            },
-            title: 'Switch Accounts',
-            onClick: (event) => {
-              event.stopPropagation()
-              this.props.dispatch(actions.showAccountsPage())
-            },
-          }),
+          h(Tooltip, { title: 'Switch Accounts' }, [
+            h('img.cursor-pointer.color-orange', {
+              src: 'images/switch_acc.svg',
+              style: {
+                width: '23.5px',
+                marginRight: '8px',
+              },
+              onClick: (event) => {
+                event.stopPropagation()
+                this.props.dispatch(actions.showAccountsPage())
+              },
+            }),
+          ]),
 
           // hamburger
           h(SandwichExpando, {
diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
index 182d7a670..a01603585 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@@ -3,7 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
 
-const Tooltip = require('react-tooltip-component')
+const Tooltip = require('./tooltip')
 
 module.exports = CopyButton
 
@@ -32,7 +32,6 @@ CopyButton.prototype.render = function () {
   }, [
 
     h(Tooltip, {
-      position: 'top',
       title: message,
     }, [
       h('i.fa.fa-clipboard.cursor-pointer.color-orange', {
diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
new file mode 100644
index 000000000..4eab8611e
--- /dev/null
+++ b/ui/app/components/tooltip.js
@@ -0,0 +1,22 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ReactTooltip = require('react-tooltip-component')
+
+module.exports = Tooltip
+
+inherits(Tooltip, Component)
+function Tooltip () {
+  Component.call(this)
+}
+
+Tooltip.prototype.render = function () {
+  const props = this.props
+
+  return h(ReactTooltip, {
+    position: 'left',
+    title: props.title,
+    fixed: false,
+  }, props.children)
+
+}