#636: Responsive viewport switcher - added tooltip styling

Author: joiecaquicla

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

@@ -23,6 +23,24 @@
         opacity: 1;
         visibility: visible;
     }
+
+    .tooltip {
+        margin-left: 0;
+        .tooltip-content {
+            background: rgba(49, 48, 43, 0.8);
+            text-align: left;
+            font-size: 12px;
+            padding: 7px 9px;
+
+            &:before {
+                opacity: 0.65;
+            }
+
+            .tooltip-label {
+                font-weight: bold;
+            }
+        }
+    }
 }
 
 .admin__fieldset > .admin__field > .admin__control-grouped {

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

@@ -12,18 +12,16 @@
     <div class="admin__field pagebuilder-header"
          css="visible: panel.isVisible(), 'transition-out': isSnapshotTransition()"
          if="!isSnapshot()">
-        <span class="with-tooltip">
-            <each args="data: Object.keys(viewports), as: 'name'">
-                <span class="tooltip">
-                    <button type="button" translate="$parent.viewports[name].label" disable="name === $parent.viewport()" click="$parent.toggleViewport.bind($parent, name)"/>
-                    <span class="tooltip-content">
-                        <span translate="$parent.viewports[name].label"/>
-                        <span translate="'View your content for '"/><text args="name"/>
-                        <span translate="'Width'"/>: <text args="Object.values($parent.viewports[name].conditions)[0]"/>
-                    </span>
+        <each args="data: Object.keys(viewports), as: 'name'">
+            <span class="tooltip">
+                <button type="button" translate="$parent.viewports[name].label" disable="name === $parent.viewport()" click="$parent.toggleViewport.bind($parent, name)"/>
+                <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>
-            </each>
-        </span>
+            </span>
+        </each>
         <button type="button" translate="'Apply Template'" if="isAllowedTemplateApply" click="toggleTemplateManger"/>
         <button type="button" translate="'Save as Template'" if="isAllowedTemplateSave" click="saveAsTemplate"/>
         <i click="toggleFullScreen.bind($data, {animate:true})"