fix(ui): tooltip positioning issues (#6439)

Author: AlessioGr

packages/richtext-lexical/src/field/Field.tsx

@@ -84,14 +84,14 @@ const _RichText: React.FC<
         width,
       }}
     >
+      <FieldLabel
+        CustomLabel={CustomLabel}
+        label={label}
+        required={required}
+        {...(labelProps || {})}
+      />
       <div className={`${baseClass}__wrap`}>
         <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-        <FieldLabel
-          CustomLabel={CustomLabel}
-          label={label}
-          required={required}
-          {...(labelProps || {})}
-        />
         <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>
           <LexicalProvider
             editorConfig={editorConfig}

packages/richtext-lexical/src/field/features/blocks/component/index.scss

@@ -106,10 +106,6 @@
     line-height: unset;
   }
 
-  &__error-wrap {
-    position: relative;
-  }
-
   &__rows {
     display: flex;
     flex-direction: column;

packages/richtext-lexical/src/field/index.scss

@@ -1,8 +1,6 @@
 @import '../scss/styles.scss';
 
 .rich-text-lexical {
-  display: flex;
-
   .errorBoundary {
     pre {
       text-wrap: unset;

packages/richtext-slate/src/field/RichText.tsx

@@ -315,14 +315,14 @@ const RichTextField: React.FC<
         width,
       }}
     >
+      <FieldLabel
+        CustomLabel={CustomLabel}
+        label={label}
+        required={required}
+        {...(labelProps || {})}
+      />
       <div className={`${baseClass}__wrap`}>
         <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-        <FieldLabel
-          CustomLabel={CustomLabel}
-          label={label}
-          required={required}
-          {...(labelProps || {})}
-        />
         <Slate
           editor={editor}
           key={JSON.stringify({ initialValue, path })} // makes sure slate is completely re-rendered when initialValue changes, bypassing the slate-internal value memoization. That way, external changes to the form will update the editor

packages/ui/src/elements/Tooltip/index.scss

@@ -6,7 +6,7 @@
   opacity: 0;
   background-color: var(--theme-elevation-800);
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   left: 50%;
   padding: base(0.2) base(0.4);
   color: var(--theme-elevation-0);
@@ -52,8 +52,9 @@
     }
   }
 
+
   &--position-top {
-    bottom: 100%;
+    top: calc(var(--base) * -0.6 - 13px);
     transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
 
     &::after {
@@ -62,8 +63,9 @@
     }
   }
 
+
   &--position-bottom {
-    top: 100%;
+    bottom: calc(var(--base) * -0.6 - 13px);
     transform: translate3d(-50%, var(--caret-size), 0);
 
     &::after {

packages/ui/src/elements/Tooltip/index.tsx

@@ -11,6 +11,10 @@ export type Props = {
   className?: string
   delay?: number
   show?: boolean
+  /**
+   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false
+   */
+  staticPositioning?: boolean
 }
 
 export const Tooltip: React.FC<Props> = (props) => {
@@ -21,18 +25,22 @@ export const Tooltip: React.FC<Props> = (props) => {
     className,
     delay = 350,
     show: showFromProps = true,
+    staticPositioning = false,
   } = props
 
   const [show, setShow] = React.useState(showFromProps)
   const [position, setPosition] = React.useState<'bottom' | 'top'>('top')
 
   const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')
 
-  const [ref, intersectionEntry] = useIntersect({
-    root: boundingRef?.current || null,
-    rootMargin: '-145px 0px 0px 100px',
-    threshold: 0,
-  })
+  const [ref, intersectionEntry] = useIntersect(
+    {
+      root: boundingRef?.current || null,
+      rootMargin: '-145px 0px 0px 100px',
+      threshold: 0,
+    },
+    staticPositioning,
+  )
 
   useEffect(() => {
     let timerId: NodeJS.Timeout
@@ -52,22 +60,25 @@ export const Tooltip: React.FC<Props> = (props) => {
   }, [showFromProps, delay])
 
   useEffect(() => {
+    if (staticPositioning) return
     setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')
-  }, [intersectionEntry])
+  }, [intersectionEntry, staticPositioning])
 
+  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.
   return (
     <React.Fragment>
-      <aside
-        aria-hidden="true"
-        className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']
-          .filter(Boolean)
-          .join(' ')}
-        ref={ref}
-        title={getTitleAttribute(children)}
-      >
-        <div className="tooltip-content">{children}</div>
-      </aside>
-
+      {!staticPositioning && (
+        <aside
+          aria-hidden="true"
+          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']
+            .filter(Boolean)
+            .join(' ')}
+          ref={ref}
+          style={{ opacity: '0' }}
+        >
+          <div className="tooltip-content">{children}</div>
+        </aside>
+      )}
       <aside
         className={[
           'tooltip',

packages/ui/src/fields/Array/index.scss

@@ -54,10 +54,6 @@
     }
   }
 
-  &__error-wrap {
-    position: relative;
-  }
-
   &__row-header {
     display: flex;
     align-items: center;

packages/ui/src/fields/Array/index.tsx

@@ -202,11 +202,7 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
         .join(' ')}
       id={`field-${path.replace(/\./g, '__')}`}
     >
-      {showError && (
-        <div className={`${baseClass}__error-wrap`}>
-          <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-        </div>
-      )}
+      {showError && <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />}
       <header className={`${baseClass}__header`}>
         <div className={`${baseClass}__header-wrap`}>
           <div className={`${baseClass}__header-content`}>

packages/ui/src/fields/Blocks/index.scss

@@ -75,10 +75,6 @@
     line-height: unset;
   }
 
-  &__error-wrap {
-    position: relative;
-  }
-
   &__rows {
     display: flex;
     flex-direction: column;

packages/ui/src/fields/Blocks/index.tsx

@@ -215,11 +215,7 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
         .join(' ')}
       id={`field-${path.replace(/\./g, '__')}`}
     >
-      {showError && (
-        <div className={`${baseClass}__error-wrap`}>
-          <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-        </div>
-      )}
+      {showError && <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />}
       <header className={`${baseClass}__header`}>
         <div className={`${baseClass}__header-wrap`}>
           <div className={`${baseClass}__heading-with-error`}>