Add tooltip to image full width

[MAILPOET-976]

assets/css/src/newsletter_editor/common.styl

@@ -187,6 +187,9 @@ select.mailpoet_font-size
   position: absolute
   top: 40px
 
+.tooltip-help-designer-full-width .dashicons
+  line-height 34px
+
 .mailpoet_button_primary
   border-color: $button-primary-border-color
   background-color: $button-primary-background-color

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

@@ -61,6 +61,12 @@ define([
   });
 
   Module.ImageBlockSettingsView = base.BlockSettingsView.extend({
+    onRender: function() {
+      MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-full-width'), {
+        tooltipId: 'tooltip-editor-full-width',
+        tooltip: MailPoet.I18n.t('helpTooltipDesignerFullWidth'),
+      });
+    },
     getTemplate: function() { return templates.imageBlockSettings; },
     events: function() {
       return {

views/newsletter/editor.html

@@ -336,6 +336,7 @@
     'helpTooltipDesignerStyles': __('We only include fonts that will display in all email clients. We understand it can feel limiting!'),
     '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."),
     '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

@@ -29,6 +29,7 @@
             <input type="checkbox" name="fullWidth" class="mailpoet_field_image_full_width" value="true" {{#if model.fullWidth }}CHECKED{{/if}}/>
             <%= __('Full width') %>
         </label>
+        <span id="tooltip-designer-full-width" class="tooltip-help-designer-full-width"></span>
     </div>
 </div>
 <hr />