Tooltip Position Invert when space isn't available

Author: amey-shrivastava

src/visualBuilder/components/FieldToolbar.tsx

@@ -41,6 +41,9 @@ import {
 } from "./FieldRevert/FieldRevertComponent";
 
 export type FieldDetails = Pick<VisualBuilderCslpEventDetails, "editableElement" | "fieldMetadata">;
+
+const TOOLTIP_TOP_EDGE_BUFFER = 96;
+
 interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
 };
@@ -103,7 +106,7 @@ function FieldToolbarComponent(
     props: MultipleFieldToolbarProps
 ): JSX.Element | null {
     const { eventDetails } = props;
-    const { fieldMetadata, editableElement: targetElement} = eventDetails;
+    const { fieldMetadata, editableElement: targetElement } = eventDetails;
     const direction = useSignal("");
     const parentPath =
         fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||
@@ -164,9 +167,12 @@ function FieldToolbarComponent(
             return null;
         }
     }
-    
+
     direction.value = getChildrenDirection(targetElement, parentPath);
 
+    const invertTooltipPosition =
+        targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
+
     const editButton = Icon ? (
         <button
             data-testid="visual-builder__focused-toolbar__multiple-field-toolbar__edit-button"
@@ -175,7 +181,12 @@ function FieldToolbarComponent(
                 visualBuilderStyles()["visual-builder__button"],
                 visualBuilderStyles()["visual-builder__button--secondary"],
                 visualBuilderStyles()["visual-builder__button--edit"],
-                visualBuilderStyles()["visual-builder__tooltip"]
+                visualBuilderStyles()["visual-builder__tooltip"],
+                {
+                    "visual-builder__tooltip--bottom": invertTooltipPosition,
+                    [visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
+                        invertTooltipPosition,
+                }
             )}
             data-tooltip={"Edit"}
             onClick={(e) => {
@@ -196,7 +207,12 @@ function FieldToolbarComponent(
                 "visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
                 visualBuilderStyles()["visual-builder__button"],
                 visualBuilderStyles()["visual-builder__button--secondary"],
-                visualBuilderStyles()["visual-builder__tooltip"]
+                visualBuilderStyles()["visual-builder__tooltip"],
+                {
+                    "visual-builder__tooltip--bottom": invertTooltipPosition,
+                    [visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
+                        invertTooltipPosition,
+                }
             )}
             data-tooltip={"Replace"}
             data-testid={`visual-builder-replace-${fieldType}`}
@@ -216,19 +232,28 @@ function FieldToolbarComponent(
         </button>
     ) : null;
 
-    const formButton = <button 
-        className={classNames(
-            "visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
-            visualBuilderStyles()["visual-builder__button"],
-            visualBuilderStyles()["visual-builder__button--secondary"],
-            visualBuilderStyles()["visual-builder__tooltip"]
-        )}
-        data-tooltip={"Form"}
-        data-testid={`visual-builder-form`}
-        onClick={(e) => {handleFormFieldFocus(eventDetails)}}
-    >
-        <FormIcon />
-    </button>
+    const formButton = (
+        <button
+            className={classNames(
+                "visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
+                visualBuilderStyles()["visual-builder__button"],
+                visualBuilderStyles()["visual-builder__button--secondary"],
+                visualBuilderStyles()["visual-builder__tooltip"],
+                {
+                    "visual-builder__tooltip--bottom": invertTooltipPosition,
+                    [visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
+                        invertTooltipPosition,
+                }
+            )}
+            data-tooltip={"Form"}
+            data-testid={`visual-builder-form`}
+            onClick={(e) => {
+                handleFormFieldFocus(eventDetails);
+            }}
+        >
+            <FormIcon />
+        </button>
+    );
 
     const toggleVariantDropdown = () => {
         setIsOpenVariantRevert(!isOpenVariantRevert);
@@ -245,7 +270,12 @@ function FieldToolbarComponent(
                 visualBuilderStyles()["visual-builder__button"],
                 visualBuilderStyles()["visual-builder__button--secondary"],
                 visualBuilderStyles()["visual-builder__tooltip"],
-                visualBuilderStyles()["visual-builder__variant-button"]
+                visualBuilderStyles()["visual-builder__variant-button"],
+                {
+                    "visual-builder__tooltip--bottom": invertTooltipPosition,
+                    [visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
+                        invertTooltipPosition,
+                }
             )}
             data-tooltip={"Variant Revert"}
             data-testid={`visual-builder-canvas-variant-revert`}

src/visualBuilder/visualBuilder.style.ts

@@ -436,6 +436,15 @@ export function visualBuilderStyles() {
                 display: none;
             }
         `,
+        "visual-builder__tooltip--bottom": css`
+            &:before {
+                bottom: -66px;
+            }
+            &:after {
+                bottom: -4px;
+                transform: rotate(180deg);
+            }
+        `,
 
         "visual-builder__tooltip--persistent": css`
             ${tooltipBaseStyle}