feat: tooltips on stats cards hover

solana-labs · Oct 4, 2019 · 041d245 · 041d245
1 parent 3766516
commit 041d245
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
+  },
 }));