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.

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,9 +110,16 @@ AccountDetailScreen.prototype.render = function () {
             value: ethUtil.toChecksumAddress(selected),
           }),
 
+          h(Tooltip, {
+            title: 'Export Private Key',
+          }, [
+            h('div', {
+              style: {
+                margin: '5px',
+              },
+            }, [
               h('img.cursor-pointer.color-orange', {
                 src: 'images/key-32.png',
-            title: 'Export Private Key',
                 onClick: () => this.requestAccountExport(selected),
                 style: {
                   margin: '0px 5px',
@@ -122,6 +130,8 @@ AccountDetailScreen.prototype.render = function () {
                   right: '4px',
                 },
               }),
+            ]),
+          ]),
 
         ]),
 

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(Tooltip, { title: 'Switch Accounts' }, [
             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())
               },
             }),
+          ]),
 
           // hamburger
           h(SandwichExpando, {

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', {

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)
+
+}