Add simple tooltip to help

[MAILPOET-976]

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

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;

views/settings/mta.html

@@ -637,6 +637,8 @@
               id="mailpoet_mta_test"
               class="button-secondary"
             ><%= __('Send a test email') %></a>
+
+            <span id="tooltip-test"></span>
           </p>
         </td>
       </tr>
@@ -663,6 +665,15 @@
 
 <script type="text/javascript">
   jQuery(function($) {
+    var tooltip = '<%= __("Didn't receive the test email? Read our [link]quick guide[/link] to sending issues.")
+      |replaceLinkTags('http://beta.docs.mailpoet.com/article/146-my-newsletters-are-not-being-received', {'target' : '_blank'})
+      |escape('js') %>'
+
+    MailPoet.helpTooltip.show(document.getElementById("tooltip-test"), {
+      tooltipId: "tooltip-settings-test",
+      tooltip: tooltip,
+    });
+
     var sending_frequency_template =
       Handlebars.compile($('#mailpoet_sending_frequency_template').html());
 

webpack.config.js

@@ -151,6 +151,8 @@ var adminConfig = {
       'jquery.serialize_object',
       'parsleyjs',
       'analytics_event',
+      'help-tooltip.jsx',
+      'help-tooltip',
     ],
     admin_vendor: [
       'react',