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.

1 files changed, 22 insertions, 12 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',
+                },
+              }),
+            ]),
+          ]),
 
         ]),