Add tooltip to machine opens in subscribers stats summary

[MAILPOET-3741]

assets/css/src/components-plugin/_subscribers.scss

@@ -55,6 +55,14 @@
     }
   }
 
+  .tooltip {
+    margin-left: $grid-gap-half * .5;
+  }
+
+  .mailpoet-tooltip-message a {
+    color: $color-white;
+  }
+
   .mailpoet-listing-table tr:last-child td {
     border-bottom: 0;
   }

assets/js/src/help-tooltip.jsx

@@ -38,6 +38,7 @@ function Tooltip(props) {
       />
       <ReactTooltip
         globalEventOff="click"
+        className="mailpoet-tooltip-message"
         multiline
         id={tooltipId}
         efect="solid"

assets/js/src/subscribers/stats/summary.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import ReactStringReplace from 'react-string-replace';
 import MailPoet from 'mailpoet';
 import Tag from 'common/tag/tag';
+import Tooltip from 'help-tooltip';
 import { ListingsEngagementScore } from '../listings_engagement_score';
 
 export type PropTypes = {
@@ -61,6 +63,25 @@ export default ({
             <tr>
               <td>
                 <Tag>{MailPoet.I18n.t('statsMachineOpened')}</Tag>
+                <Tooltip
+                  tooltip={ReactStringReplace(
+                    MailPoet.I18n.t('statsMachineOpenedTooltip'),
+                    /\[link](.*?)\[\/link]/,
+                    (match) => (
+                      <span style={{ pointerEvents: 'all' }} key="machine-opened-info">
+                        <a
+                          href="https://kb.mailpoet.com/article/368-what-are-machine-opens"
+                          key="kb-link"
+                          target="_blank"
+                          data-beacon-article="6124b7fb21ef206e5592e188"
+                          rel="noopener noreferrer"
+                        >
+                          { match }
+                        </a>
+                      </span>
+                    )
+                  )}
+                />
               </td>
               <td><b>{machineOpen.toLocaleString()}</b></td>
               <td>

views/subscribers/subscribers.html

@@ -122,6 +122,7 @@
     'statsSentEmail': __('Sent email'),
     'statsOpened': __('Opened'),
     'statsMachineOpened': _x('Machine-opened', 'Percentage of newsletters that were opened by a machine'),
+    'statsMachineOpenedTooltip': __('A machine-opened email is an email opened by a computer in the background without the user’s explicit request or knowledge. [link]Read more[/link]'),
     'statsClicked': __('Clicked'),
     'statsNotClicked': __('Not opened'),
     'openedEmailsHeading': __('Opened emails'),