diff --git a/assets/css/src/settings.styl b/assets/css/src/settings.styl
index 5bdf6be5c7..dc795fc268 100644
--- a/assets/css/src/settings.styl
+++ b/assets/css/src/settings.styl
@@ -54,6 +54,9 @@
#mailpoet_mta_activate
visibility hidden
+ .tooltip.dashicons.dashicons-editor-help
+ font-size: 30px
+
ul.sending-method-benefits
list-style-type: none
margin-bottom: 2em
diff --git a/assets/js/src/help-tooltip.js b/assets/js/src/help-tooltip.js
new file mode 100644
index 0000000000..e8796b6172
--- /dev/null
+++ b/assets/js/src/help-tooltip.js
@@ -0,0 +1,32 @@
+define('helpTooltip', ['mailpoet', 'React', 'react-dom', 'help-tooltip.jsx'],
+ function (MailPoet, React, ReactDOM, TooltipComponent) {
+ 'use strict';
+
+ MailPoet.helpTooltip = {
+ show: function (domContainerNode, opts) {
+
+ var tooltipText = React.createElement(
+ "span",
+ {
+ style: {
+ pointerEvents: "all",
+ },
+ "dangerouslySetInnerHTML": {
+ __html: opts.tooltip,
+ },
+ },
+ null
+ );
+
+ ReactDOM.render(React.createElement(
+ TooltipComponent, {
+ tooltip: tooltipText,
+ tooltipId: opts.tooltipId,
+ }
+ ), domContainerNode);
+ },
+ };
+
+ }
+);
+
diff --git a/assets/js/src/help-tooltip.jsx b/assets/js/src/help-tooltip.jsx
new file mode 100644
index 0000000000..dcf553732d
--- /dev/null
+++ b/assets/js/src/help-tooltip.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+
+function Tooltip(props) {
+ let tooltipId = props.tooltipId;
+ // tooltip ID must be unique, defaults to tooltip text
+ if(!props.tooltipId && typeof props.tooltip === "string") {
+ tooltipId = props.tooltip;
+ }
+
+ return (
+
+
+
+