Add tooltip to image heading

[MAILPOET-976]

assets/css/src/newsletter_editor/common.styl

@@ -183,6 +183,11 @@ select.mailpoet_font-size
   position: absolute
   right: 15px
 
+.tooltip-help-designer-ideal-width
+  color: #656565
+  text-transform: none
+  margin-left: 5px
+
 .tooltip-help-designer-styles
   position: absolute
   top: 40px

assets/js/src/newsletter_editor/blocks/image.js

@@ -66,6 +66,10 @@ define([
         tooltipId: 'tooltip-editor-full-width',
         tooltip: MailPoet.I18n.t('helpTooltipDesignerFullWidth'),
       });
+      MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-ideal-width'), {
+        tooltipId: 'tooltip-editor-ideal-width',
+        tooltip: MailPoet.I18n.t('helpTooltipDesignerIdealWidth'),
+      });
     },
     getTemplate: function() { return templates.imageBlockSettings; },
     events: function() {

views/newsletter/editor.html

@@ -337,6 +337,7 @@
     'helpTooltipDesignerSubjectLine': __("You can add MailPoet shortcodes here. For example, you can add your subscribers' first names by using this shortcode: [user:firstname | default:reader] Simply copy and paste the shortcode into the field."),
     'helpTooltipDesignerPreheader': __("This optional text will appear in your subscribers' inboxes, beside the subject line. Write something enticing!"),
     'helpTooltipDesignerFullWidth': __("This option eliminates padding around the image. It only works if the image is larger than the column size."),
+    'helpTooltipDesignerIdealWidth': __("Use images with widths of at least 1,000 pixels to ensure sharp display on high density screens, like mobile devices."),
     'templateDescriptionMissing': __('Please add a template description'),
     'templateSaved': __('Template has been saved.'),
     'templateSaveFailed': __('Template has not been saved, please try again'),

views/newsletter/templates/blocks/image/settings.hbs

@@ -1,4 +1,4 @@
-<h3><%= __('Image') %></h3>
+<h3><%= __('Image') %><span id="tooltip-designer-ideal-width" class="tooltip-help-designer-ideal-width"></span></h3>
 <div class="mailpoet_form_field">
     <label>
         <div class="mailpoet_form_field_title"><%= __('Link') %> <span class="mailpoet_form_field_optional">(<%= __('Optional') %>)</div>