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

packages/ui/src/forms/FieldError/index.scss

@@ -2,8 +2,6 @@
 
 .field-error.tooltip {
   font-family: var(--font-body);
-  top: 0;
-  bottom: auto;
   left: auto;
   max-width: 75%;
   right: calc(var(--base) * 0.5);
@@ -12,5 +10,6 @@
 
   &::after {
     border-top-color: var(--theme-error-500);
+    border-bottom-color: var(--theme-error-500);
   }
 }

packages/ui/src/forms/FieldError/index.tsx

@@ -30,9 +30,9 @@ const DefaultFieldError: React.FC<ErrorProps> = (props) => {
   const message = messageFromProps || errorMessage
   const showMessage = showErrorFromProps || (hasSubmitted && valid === false)
 
-  if (showMessage) {
+  if (showMessage && message?.length) {
     return (
-      <Tooltip alignCaret={alignCaret} className={baseClass} delay={0}>
+      <Tooltip alignCaret={alignCaret} className={baseClass} delay={0} staticPositioning>
         {message}
       </Tooltip>
     )

packages/ui/src/forms/RenderFields/index.scss

@@ -11,8 +11,13 @@
     --spacing-field: 0;
   }
 
+  .field-type__wrap {
+    position: relative;
+  }
+
   & > .field-type {
     margin-bottom: var(--spacing-field);
+    position: relative;
 
     &[type='hidden'] {
       margin-bottom: 0;