From 041d245d3daf0668364719b2c30b6a5046a606e4 Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Thu, 3 Oct 2019 14:35:44 -0700
Subject: [PATCH] feat: tooltips on stats cards hover

---
 .../NetworkOverview/StatCards/index.jsx       | 22 ++++++++++++-------
 .../NetworkOverview/StatCards/styles.js       |  8 +++++++
 src/v2/components/UI/StatCard/index.jsx       | 19 ++++++++++++----
 src/v2/components/UI/StatCard/styles.js       |  8 +++++++
 4 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx b/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx
index 68cbdae9..801b2238 100644
--- a/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx
+++ b/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import {Link} from 'react-router-dom';
 import {observer} from 'mobx-react-lite';
 import {map, size} from 'lodash/fp';
-import {Grid, Typography} from '@material-ui/core';
+import {Grid, Typography, Tooltip} from '@material-ui/core';
 import Card from 'v2/components/UI/StatCard';
 import Loader from 'v2/components/UI/Loader';
 import OverviewStore from 'v2/stores/networkOverview';
@@ -45,14 +45,20 @@ const StatCards = () => {
       title: 'Current Leader',
       value() {
         return (
-          <Link
-            className={classes.leader}
-            to={`/validators/${globalStats['!entLastLeader']}`}
+          <Tooltip
+            classes={{tooltip: classes.tooltip}}
+            placement="top"
+            title={globalStats['!entLastLeader']}
           >
-            <Typography noWrap align="center" variant="h2">
-              {globalStats['!entLastLeader']}
-            </Typography>
-          </Link>
+            <Link
+              className={classes.leader}
+              to={`/validators/${globalStats['!entLastLeader']}`}
+            >
+              <Typography noWrap align="center" variant="h2">
+                {globalStats['!entLastLeader']}
+              </Typography>
+            </Link>
+          </Tooltip>
         );
       },
       helpTerm: 'leader',
diff --git a/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js b/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js
index df205fd2..040a7c8b 100644
--- a/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js
+++ b/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js
@@ -31,4 +31,12 @@ export default makeStyles(theme => ({
     fontSize: 18,
     fontWeight: 'bold',
   },
+  tooltip: {
+    backgroundColor: getColor('white')(theme),
+    color: getColor('dark')(theme),
+    fontSize: 12,
+    lineHeight: '16px',
+    borderRadius: 0,
+    padding: 11,
+  },
 }));
diff --git a/src/v2/components/UI/StatCard/index.jsx b/src/v2/components/UI/StatCard/index.jsx
index 62d5d0c4..96a7b501 100644
--- a/src/v2/components/UI/StatCard/index.jsx
+++ b/src/v2/components/UI/StatCard/index.jsx
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import {Paper, Typography} from '@material-ui/core';
+import {Paper, Tooltip, Typography} from '@material-ui/core';
 import HelpLink from 'v2/components/HelpLink';
 
 import useStyles from './styles';
@@ -22,9 +22,20 @@ const StatCard = (props: StatCardProps) => {
       return value();
     }
     return (
-      <Typography noWrap align="center" variant="h2" className={classes.value}>
-        {value}
-      </Typography>
+      <Tooltip
+        classes={{tooltip: classes.tooltip}}
+        placement="top"
+        title={value}
+      >
+        <Typography
+          noWrap
+          align="center"
+          variant="h2"
+          className={classes.value}
+        >
+          {value}
+        </Typography>
+      </Tooltip>
     );
   };
   const renderChanges = () => {
diff --git a/src/v2/components/UI/StatCard/styles.js b/src/v2/components/UI/StatCard/styles.js
index 6575af84..07510918 100644
--- a/src/v2/components/UI/StatCard/styles.js
+++ b/src/v2/components/UI/StatCard/styles.js
@@ -31,4 +31,12 @@ export default makeStyles(theme => ({
     fontSize: 18,
     fontWeight: 'bold',
   },
+  tooltip: {
+    backgroundColor: getColor('white')(theme),
+    color: getColor('dark')(theme),
+    fontSize: 12,
+    lineHeight: '16px',
+    borderRadius: 0,
+    padding: 11,
+  },
 }));