Redesign Tooltip component

assets/js/src/common/tooltip/_stories/tooltip.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Heading from 'common/typography/heading/heading';
+import Tooltip from '../tooltip';
+
+export default {
+  title: 'Tooltips',
+};
+
+export const Tooltips = () => (
+  <>
+    <Heading level={1}>Placements</Heading>
+    <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+      <p data-tip data-for="bottom">Bottom Tooltip</p>
+      <Tooltip id="bottom" place="bottom">
+        <span>The tooltip content</span>
+      </Tooltip>
+
+      <p data-tip data-for="top">Top Tooltip</p>
+      <Tooltip id="top" place="top">
+        <span>The tooltip content</span>
+      </Tooltip>
+
+      <p data-tip data-for="right">Right Tooltip</p>
+      <Tooltip id="right" place="right">
+        <span>The tooltip content</span>
+      </Tooltip>
+
+      <p data-tip data-for="left">Left Tooltip</p>
+      <Tooltip id="left" place="left">
+        <span>The tooltip content</span>
+      </Tooltip>
+    </div>
+  </>
+);

assets/js/src/common/tooltip/tooltip.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import ReactTooltip, { TooltipProps } from 'react-tooltip';
+
+const Tooltip = ({
+  effect, textColor, backgroundColor, border, borderColor, className, children, ...props
+}: TooltipProps) => (
+  <ReactTooltip
+    effect={effect || 'solid'}
+    textColor={textColor || '#071c6d'}
+    backgroundColor={backgroundColor || '#fafbfe'}
+    borderColor={borderColor || '#e5e9f8'}
+    className={classNames('mailpoet-tooltip', className)}
+    border={border === undefined ? true : border}
+    {...props}
+  >
+    {children}
+  </ReactTooltip>
+);
+
+export default Tooltip;