diff --git a/.eslintrc.ts.json b/.eslintrc.ts.json
index 24a3f7c4db..2b3df50056 100644
--- a/.eslintrc.ts.json
+++ b/.eslintrc.ts.json
@@ -113,9 +113,7 @@
     "@typescript-eslint/camelcase": "off",
     // PropTypes
     "react/prop-types": 0,
-    "react/jsx-props-no-spreading": [2, {
-      "exceptions": ["input", "select"]
-    }],
+    "react/jsx-props-no-spreading": 0,
     // Hooks
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
diff --git a/assets/css/src/components/_tooltips.scss b/assets/css/src/components/_tooltips.scss
new file mode 100644
index 0000000000..aa32010604
--- /dev/null
+++ b/assets/css/src/components/_tooltips.scss
@@ -0,0 +1,4 @@
+.mailpoet-tooltip {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(229, 233, 248, .4), 0 5px 30px 0 $color-tertiary-light;
+}
diff --git a/assets/css/src/mailpoet-plugin.scss b/assets/css/src/mailpoet-plugin.scss
index ed70d1bb1d..f2472304b1 100644
--- a/assets/css/src/mailpoet-plugin.scss
+++ b/assets/css/src/mailpoet-plugin.scss
@@ -46,6 +46,7 @@
 @import 'components/parsley';
 @import 'components/tabs';
 @import 'components/steps';
+@import 'components/tooltips';
 @import 'components-plugin/automatic-emails';
 @import 'components-plugin/browser-preview';
 @import 'components-plugin/dynamic-segments';
diff --git a/assets/js/src/common/tooltip/_stories/tooltip.tsx b/assets/js/src/common/tooltip/_stories/tooltip.tsx
new file mode 100644
index 0000000000..31d8f0fc20
--- /dev/null
+++ b/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>
+  </>
+);
diff --git a/assets/js/src/common/tooltip/tooltip.tsx b/assets/js/src/common/tooltip/tooltip.tsx
new file mode 100644
index 0000000000..b20d5661c3
--- /dev/null
+++ b/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;
diff --git a/package-lock.json b/package-lock.json
index 2ce5b3af6e..94ca398ab5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21225,11 +21225,19 @@
       }
     },
     "react-tooltip": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.0.3.tgz",
-      "integrity": "sha512-xEM+fr8tr/KJP5PZEOg/fc5bZ7ZkC658iMDgCq5DfTqHVyuIOOd5loyxQD0eAJiZ6jWdEd18owbRqd3stHtEDg==",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.6.tgz",
+      "integrity": "sha512-KX/zCsPFCI8RuulzBX86U+Ur7FvgGNRBdb7dUu0ndo8Urinn48nANq9wfq4ABlehweQjPzLl7XdNAtLKza+I3w==",
       "requires": {
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.7.2",
+        "uuid": "^7.0.3"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+        }
       }
     },
     "react-transition-group": {
diff --git a/package.json b/package.json
index fac5ad8f0c..cd8c7553d6 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
     "react-string-replace": "^0.3.2",
-    "react-tooltip": "^4.0.3",
+    "react-tooltip": "^4.2.6",
     "satismeter-loader": "^1.1.0",
     "select2": "^4.0.13",
     "setimmediate": "^1.0.5",