Add tooltip to editor styles

[MAILPOET-976]

assets/css/src/newsletter_editor/common.styl

@@ -183,6 +183,10 @@ select.mailpoet_font-size
   position: absolute
   right: 15px
 
+.tooltip-help-designer-styles
+  position: absolute
+  top: 40px
+
 .mailpoet_button_primary
   border-color: $button-primary-border-color
   background-color: $button-primary-background-color

assets/js/src/newsletter_editor/components/sidebar.js

@@ -370,10 +370,15 @@ define([
 
     App._appView.showChildView('sidebarRegion', sidebarView);
 
-    MailPoet.helpTooltip.show(document.getElementById("tooltip-send-preview"), {
-      tooltipId: "tooltip-editor-send-preview",
+    MailPoet.helpTooltip.show(document.getElementById('tooltip-send-preview'), {
+      tooltipId: 'tooltip-editor-send-preview',
       tooltip: MailPoet.I18n.t('helpTooltipSendPreview'),
     });
+
+    MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-styles'), {
+      tooltipId: 'tooltip-editor-designer-styles',
+      tooltip: MailPoet.I18n.t('helpTooltipDesignerStyles'),
+    });
   });
 
   return Module;

views/newsletter/editor.html

@@ -333,6 +333,7 @@
     'newsletterPreviewSent': __('Your test email has been sent!'),
     'templateNameMissing': __('Please add a template name'),
     'helpTooltipSendPreview': helpTooltipSendPreview,
+    'helpTooltipDesignerStyles': __('We only include fonts that will display in all email clients. We understand it can feel limiting!'),
     'templateDescriptionMissing': __('Please add a template description'),
     'templateSaved': __('Template has been saved.'),
     'templateSaveFailed': __('Template has not been saved, please try again'),

views/newsletter/templates/components/sidebar/styles.hbs

@@ -1,6 +1,7 @@
 <div class="handlediv" title="<%= __('Click to toggle') %>"><br></div>
 <h3><%= __('Styles') %></h3>
 <div class="mailpoet_region_content">
+    <span id="tooltip-designer-styles" class="tooltip-help-designer-styles"></span>
     <form id="mailpoet_newsletter_styles" action="" method="post" accept-charset="utf-8">
         <div class="mailpoet_form_field">
             <span>