Feature: Add Tooltip component

src/dataDisplay/Icon/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import Tooltip from '@material-ui/core/Tooltip';
-import { withStyles } from '@material-ui/core/styles';
+
+import { Tooltip } from '../..';
 
 import add from './images/add';
 import addressBook from './images/addressBook';
@@ -72,9 +72,8 @@ import transactionsInactive from './images/transactionsInactive';
 import unlocked from './images/unlocked';
 import userEdit from './images/userEdit';
 import wallet from './images/wallet';
-import { rgba } from 'polished';
 
-import theme, { ThemeColors, ThemeIconSize } from '../../theme';
+import { ThemeColors, ThemeIconSize } from '../../theme';
 
 const StyledIcon = styled.span<{ color?: ThemeColors }>`
   display: inline-flex;
@@ -85,18 +84,6 @@ const StyledIcon = styled.span<{ color?: ThemeColors }>`
   }
 `;
 
-const StyledTooltip = withStyles(() => ({
-  popper: {
-    zIndex: 2001,
-  },
-  tooltip: {
-    backgroundColor: theme.colors.overlay.color,
-    border: `1px solid ${theme.colors.icon}`,
-    boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`,
-    color: theme.colors.text,
-  },
-}))(Tooltip);
-
 const icons = {
   add,
   addressBook,
@@ -199,8 +186,8 @@ export const Icon = ({
   return tooltip === undefined ? (
     IconElement
   ) : (
-    <StyledTooltip title={tooltip} placement="top">
+    <Tooltip title={tooltip} placement="top">
       {IconElement}
-    </StyledTooltip>
+    </Tooltip>
   );
 };

src/dataDisplay/Tooltip/index.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Tooltip } from './index';
+
+export default {
+  title: 'Data Display/Tooltip',
+  component: Tooltip,
+  parameters: {
+    componentSubtitle: 'Add a tooltip to any ReactElement passed as a child.',
+  },
+};
+
+export const Basic = (): React.ReactElement => {
+  return (
+    <Tooltip title="Some text">
+      <span>hover me</span>
+    </Tooltip>
+  );
+};
+
+export const CustomColor = (): React.ReactElement => {
+  return (
+    <Tooltip title="Some text" backgroundColor="rinkeby">
+      <span>hover me</span>
+    </Tooltip>
+  );
+};

src/dataDisplay/Tooltip/index.tsx

@@ -0,0 +1,61 @@
+import React, { ReactElement } from 'react';
+import MUITooltip, { TooltipProps } from '@material-ui/core/Tooltip';
+import { withStyles } from '@material-ui/core/styles';
+import { rgba } from 'polished';
+
+import theme, { ThemeColors } from '../../theme';
+
+type TooltipColors = {
+  backgroundColor?: ThemeColors;
+  borderColor?: ThemeColors;
+  textColor?: ThemeColors;
+};
+
+const customTooltip = ({
+  backgroundColor,
+  borderColor,
+  textColor,
+}: TooltipColors) =>
+  withStyles(() => ({
+    popper: {
+      zIndex: 2001,
+    },
+    tooltip: {
+      backgroundColor: backgroundColor
+        ? (theme.colors[backgroundColor] as string)
+        : theme.colors.overlay.color,
+      border: `1px solid ${
+        borderColor ? (theme.colors[borderColor] as string) : theme.colors.icon
+      }`,
+      boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`,
+      color: textColor
+        ? (theme.colors[textColor] as string)
+        : theme.colors.text,
+    },
+  }))(MUITooltip);
+
+type Props = {
+  title: string;
+  children: ReactElement;
+} & TooltipColors;
+
+export const Tooltip = ({
+  title,
+  backgroundColor,
+  borderColor,
+  textColor,
+  children,
+  ...rest
+}: Props & TooltipProps): ReactElement => {
+  const StyledTooltip = customTooltip({
+    backgroundColor,
+    borderColor,
+    textColor,
+  });
+
+  return (
+    <StyledTooltip title={title} {...rest}>
+      {children}
+    </StyledTooltip>
+  );
+};

src/dataDisplay/index.ts

@@ -8,6 +8,7 @@ export * from './Icon';
 export { default as IconText } from './IconText';
 export { default as Layout } from './Layout';
 export * from './Table';
+export * from './Tooltip';
 export { default as Text } from './Text';
 export { default as Title } from './Title';
 export { default as Section } from './Section';