feat: Setup ToolTip component #39

Chia-Network · Dec 7, 2021 · 736e5fb · 736e5fb
1 parent f8386f3
commit 736e5fb
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git a/src/components/blocks/ToolTip.js b/src/components/blocks/ToolTip.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { withTheme } from 'styled-components';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+
+const ToolTipPlacement = {
+  Top: 'top',
+  Bottom: 'bottom',
+  Left: 'left',
+  Right: 'right',
+  TopLeft: 'top-start',
+  TopRight: 'top-end',
+  BottomLeft: 'bottom-start',
+  BottomRight: 'bottom-end',
+  LeftTop: 'left-start',
+  LeftBottom: 'left-end',
+  RightTop: 'right-start',
+  RightBottom: 'right-end',
+};
+
+const ToolTip = withTheme(
+  ({ children, body, placement }) => {
+    return (
+      <Tooltip
+        title={body}
+        placement={placement}
+        componentsProps={{
+          popper: {
+            sx: {
+              [`& .${tooltipClasses.arrow}`]: {
+                color: '#262626',
+              },
+              [`& .${tooltipClasses.tooltip}`]: {
+                maxWidth: '12.5rem',
+                backgroundColor: '#262626',
+                padding: '0.375rem 0.5rem',
+                fontSize: '0.875rem',
+                lineHeight: '1.3125rem',
+                fontWeight: '400',
+                fontStyle: 'normal',
+                borderRadius: '0.125rem',
+              },
+            },
+          },
+        }}
+        arrow>
+        <span>{children}</span>
+      </Tooltip>
+    );
+  },
+);
+
+export { ToolTipPlacement, ToolTip };
diff --git a/src/components/blocks/index.js b/src/components/blocks/index.js
@@ -4,3 +4,4 @@ export * from './Card';
 export * from './DataTable';
 export * from './LocaleSwitcher';
 export * from './NavBar';
+export * from './ToolTip';
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
@@ -13,9 +13,14 @@ import {
   DataTable,
   PrimaryButton,
   LightThemeIcon,
+  ToolTip,
+  ToolTipPlacement,
 } from '../../components';
 
 const Home = () => {
+  const tooltipContent =
+    'Distinctively monetize cost effective networks for cross-media bandwidth';
+
   return (
     <>
       <Card>
@@ -26,6 +31,54 @@ const Home = () => {
         <Subtitle>This is a Subtitle</Subtitle>
         <MenuText>This is Menu Text</MenuText>
         <ButtonText>This is Button Text</ButtonText>
+
+        <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+          <ToolTip body={tooltipContent} placement={ToolTipPlacement.Top}>
+            <span>Tooltip Top</span>
+          </ToolTip>
+          <ToolTip body={tooltipContent} placement={ToolTipPlacement.Bottom}>
+            <span>Bottom</span>
+          </ToolTip>
+          <ToolTip body={tooltipContent} placement={ToolTipPlacement.Left}>
+            <span>Left</span>
+          </ToolTip>
+          <ToolTip body={tooltipContent} placement={ToolTipPlacement.Right}>
+            <span>Right</span>
+          </ToolTip>
+          <ToolTip body={tooltipContent} placement={ToolTipPlacement.TopLeft}>
+            <span>Top-Left</span>
+          </ToolTip>
+          <ToolTip body={tooltipContent} placement={ToolTipPlacement.TopRight}>
+            <span>Top-Right</span>
+          </ToolTip>
+          <ToolTip
+            body={tooltipContent}
+            placement={ToolTipPlacement.BottomLeft}>
+            <span>Bottom-Left</span>
+          </ToolTip>
+          <ToolTip
+            body={tooltipContent}
+            placement={ToolTipPlacement.BottomRight}>
+            <span>Bottom-Right</span>
+          </ToolTip>
+          <ToolTip body={tooltipContent} placement={ToolTipPlacement.LeftTop}>
+            <span>Left-Top</span>
+          </ToolTip>
+          <ToolTip
+            body={tooltipContent}
+            placement={ToolTipPlacement.LeftBottom}>
+            <span>Left-Bottom</span>
+          </ToolTip>
+          <ToolTip body={tooltipContent} placement={ToolTipPlacement.RightTop}>
+            <span>Right-Top</span>
+          </ToolTip>
+          <ToolTip
+            body={tooltipContent}
+            placement={ToolTipPlacement.RightBottom}>
+            <span>Right-Bottom</span>
+          </ToolTip>
+        </div>
+
         <DataTable
           headings={['Column 1', 'Column 2', 'Column 3']}
           data={[