Add simple tooltip to help

[MAILPOET-976]

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);
+      },
+    };
+
+  }
+);
+

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 (
+    <span>
+      <span
+        style={{
+          cursor: "help",
+        }}
+        className="tooltip dashicons dashicons-editor-help"
+        data-event="click"
+        data-tip
+        data-for={tooltipId}
+      >
+      </span>
+        <ReactTooltip
+          globalEventOff="click"
+          multiline={true}
+          id={tooltipId}
+          efect="solid"
+        >
+          {props.tooltip}
+        </ReactTooltip>
+    </span>
+  );
+}
+
+Tooltip.propTypes = {
+  tooltipId: React.PropTypes.string,
+  tooltip: React.PropTypes.node.isRequired,
+};
+
+Tooltip.defaultProps = {
+  tooltipId: undefined,
+};
+
+module.exports = Tooltip;