#637: Form field/field group viewport scope - added icon and tooltip on hover and applied styling

Author: yolouiese

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_tabs_mobile_form.xml

@@ -41,6 +41,18 @@
                     </item>
                 </item>
             </argument>
+            <settings>
+                <additionalClasses>
+                    <class name="admin__field-min-height-mobile">true</class>
+                </additionalClasses>
+                <tooltip>
+                    <description translate="true">
+                        <![CDATA[
+                        <p>Style changes will only affect this breakpoint</p>
+                        ]]>
+                    </description>
+                </tooltip>
+            </settings>
         </field>
     </fieldset>
 </form>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tabs/_import.less

@@ -8,3 +8,4 @@
 //  _____________________________________________
 
 @import './_default.less';
+@import './_mobile.less';

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tabs/_mobile.less

@@ -0,0 +1,63 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Default appearance styles rendered through Mobile viewport
+//  _____________________________________________________
+.admin__fieldset .admin__field.admin__field-min-height-mobile {
+    .admin__field-control._with-tooltip {
+        display: flex;
+        width: 18.6rem;
+
+        .admin__control-addon {
+            max-width: inherit;
+        }
+
+        .admin__field-tooltip {
+            margin-left: 15px;
+        }
+
+        .admin__field-tooltip-action {
+            &:before {
+                //content: url();
+            }
+        }
+
+        .admin__field-tooltip-content {
+            background: rgba(49, 48, 43, .8);
+            border: none;
+            bottom: auto;
+            box-shadow: unset;
+            left: -1.5rem;
+            padding: 6px 15px 2px;
+            top: 3.5rem;
+            right: auto;
+            width: 16rem;
+
+            p {
+                color: #ffffff;
+                font-size: 1.2rem;
+            }
+
+            &:before {
+                border-bottom: 4px solid rgba(49, 48, 43, .8);
+                border-left: 5px solid transparent;
+                border-right: 5px solid transparent;
+                border-top: unset;
+                content: '';
+                height: 0;
+                left: 23px;
+                opacity: 0.9;
+                position: absolute;
+                top: -4px;
+                width: 0;
+            }
+
+            &:after {
+                display: none;
+            }
+        }
+    }
+}