Merge branch 'viewport-switcher' of github.com:magento/magento2-page-builder into 636-responsive-breakpoint-switcher

 Conflicts:
	app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less
	app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html

Author: omiroshnichenko

app/code/Magento/PageBuilder/Component/Form/Element/Wysiwyg.php

@@ -42,6 +42,7 @@ class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
      * @param ViewConfigInterface $viewConfig
      * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      * @SuppressWarnings(PHPMD.ExcessiveParameterList)
+     * @SuppressWarnings(PHPMD.NPathComplexity)
      * @throws \Magento\Framework\Exception\NoSuchEntityException
      */
     public function __construct(
@@ -90,7 +91,7 @@ public function __construct(
             $wysiwygConfigData['viewports'] = $viewConfig->getViewConfig()->getVarValue(
                 'Magento_PageBuilder',
                 'breakpoints'
-            );;
+            );
 
             if ($overrideSnapshot) {
                 $pageBuilderConfig = $pageBuilderConfig ?: ObjectManager::getInstance()->get(PageBuilderConfig::class);

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -32,6 +32,24 @@
         right: 0;
         transform: translate(0, 12%);
     }
+
+    .tooltip {
+        margin-left: 0;
+        .tooltip-content {
+            background: rgba(49, 48, 43, .8);
+            font-size: 12px;
+            padding: 7px 9px;
+            text-align: left;
+
+            &:before {
+                opacity: .65;
+            }
+
+            .tooltip-label {
+                font-weight: bold;
+            }
+        }
+    }
 }
 
 .admin__fieldset > .admin__field > .admin__control-grouped {

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -13,15 +13,7 @@
          css="visible: panel.isVisible(), 'transition-out': isSnapshotTransition()"
          if="!isSnapshot()">
         <span class="viewport-buttons">
-            <each args="data: Object.keys(viewports), as: 'name'">
-                <button type="button"
-                        class="page-builder-viewport"
-                        css="$parent.viewports[name].button"
-                        disable="name === $parent.viewport()"
-                        click="$parent.toggleViewport.bind($parent, name)">
-                    <img data-bind="attr:{src: require.toUrl($parent.viewports[name].icon)}" draggable="false" aria-hidden="true"/>
-                </button>
-            </each>
+              <render args="viewportTemplate"/>
         </span>
         <span class="template-buttons">
             <button type="button" translate="'Apply Template'" if="isAllowedTemplateApply" click="toggleTemplateManger"/>

app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html

@@ -0,0 +1,22 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<each args="data: Object.keys(viewports), as: 'name'">
+    <span class="tooltip">
+        <button type="button"
+                class="page-builder-viewport"
+                css="$parent.viewports[name].button"
+                disable="name === $parent.viewport()"
+                click="$parent.toggleViewport.bind($parent, name)">
+            <img data-bind="attr:{src: require.toUrl($parent.viewports[name].icon)}" draggable="false" aria-hidden="true"/>
+        </button>
+        <span class="tooltip-content">
+            <span class="tooltip-label" translate="$parent.viewports[name].label"/><br/>
+            <span translate="'View your content for '"/><text args="name"/><br/>
+            <span translate="'Width'"/>: <text args="Object.values($parent.viewports[name].conditions)[0]"/>
+        </span>
+    </span>
+</each>

app/code/Magento/PageBuilder/view/adminhtml/web/template/viewport/switcher.html

@@ -223,6 +223,10 @@ export default class PageBuilder implements PageBuilderInterface {
         return this.template;
     }
 
+    get viewportTemplate(): string {
+        return "Magento_PageBuilder/viewport/switcher";
+    }
+
     /**
      * Toggle template manager
      */