feat(ui): portal all tooltips

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

@@ -370,7 +370,7 @@ export const FileManager: React.FC<FileManagerProps> = ({
 
   return (
     <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>
-      <FieldError message={errorMessage} showError={showError} />
+      <FieldError message={errorMessage} path="filename" showError={showError} />
       <div className={`${baseClass}__panel`}>
         {data?.filename && !removedFile && (
           <FileToolbar

packages/ui/src/elements/Locked/index.css

@@ -25,12 +25,4 @@
       outline-color: var(--color-border-selected);
     }
   }
-
-  /* Fixed-position anchor mirroring the icon's rect, so the portaled tooltip (escaping
-   * the table's `overflow` clipping) can position against it. */
-  .locked__tooltip-anchor {
-    position: fixed;
-    z-index: var(--z-popup);
-    pointer-events: none;
-  }
 }

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

@@ -1,8 +1,7 @@
 'use client'
 import type { User } from 'payload'
 
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
+import React, { useState } from 'react'
 
 import { LockIcon } from '../../icons/Lock/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
@@ -16,82 +15,37 @@ export const Locked: React.FC<{
   className?: string
   user: User
 }> = ({ className, user }) => {
-  const anchorRef = useRef<HTMLDivElement>(null)
   const [hovered, setHovered] = useState(false)
-  const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null)
   const { t } = useTranslation()
 
   const userToUse = isClientUserObject(user) ? (user.email ?? user.id) : t('general:anotherUser')
   const tooltipLabel = `${userToUse} ${t('general:isEditing')}`
 
-  const updateAnchorRect = useCallback(() => {
-    const node = anchorRef.current
-
-    if (!node) {
-      return
-    }
-
-    setAnchorRect(node.getBoundingClientRect())
-  }, [])
-
-  useEffect(() => {
-    if (!hovered) {
-      return
-    }
-
-    // Keep the portaled tooltip aligned to the icon as the page or an overflow
-    // container scrolls.
-    window.addEventListener('scroll', updateAnchorRect, true)
-    window.addEventListener('resize', updateAnchorRect)
-
-    return () => {
-      window.removeEventListener('scroll', updateAnchorRect, true)
-      window.removeEventListener('resize', updateAnchorRect)
-    }
-  }, [hovered, updateAnchorRect])
-
   return (
     <div
       aria-label={tooltipLabel}
       className={[baseClass, className].filter(Boolean).join(' ')}
       onBlur={() => setHovered(false)}
-      onFocus={() => {
-        updateAnchorRect()
-        setHovered(true)
-      }}
+      onFocus={() => setHovered(true)}
       onKeyDown={(e) => {
         if (e.key === ' ') {
           e.preventDefault() // prevent page scroll when focused
         }
       }}
-      onMouseEnter={() => {
-        updateAnchorRect()
-        setHovered(true)
-      }}
+      onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
-      ref={anchorRef}
       role="button"
       tabIndex={0}
     >
       <LockIcon />
-      {hovered &&
-        anchorRect &&
-        createPortal(
-          <div
-            className={`${baseClass}__tooltip-anchor`}
-            style={{
-              height: anchorRect.height,
-              left: anchorRect.left,
-              top: anchorRect.top,
-              width: anchorRect.width,
-            }}
-          >
-            <Tooltip alignCaret="center" className={`${baseClass}__tooltip`} position="bottom" show>
-              {tooltipLabel}
-            </Tooltip>
-          </div>,
-          document.body,
-        )}
+      <Tooltip
+        alignCaret="center"
+        className={`${baseClass}__tooltip`}
+        position="bottom"
+        show={hovered}
+      >
+        {tooltipLabel}
+      </Tooltip>
     </div>
   )
 }

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

@@ -54,7 +54,7 @@ export function PreviewButton() {
         id="preview-button"
         onClick={handleClick}
       />
-      <Tooltip delay={0} show={hovered || copied}>
+      <Tooltip delay={0} id="preview-button-tooltip" show={hovered || copied}>
         {label}
       </Tooltip>
     </span>

packages/ui/src/elements/SidebarToggle/index.css

@@ -26,20 +26,4 @@
       outline-offset: -1px;
     }
   }
-
-  .sidebar-toggle .tooltip {
-    left: 0;
-    top: 100%;
-    bottom: auto;
-    transform: translate3d(0, var(--spacer-1), 0);
-  }
-
-  .sidebar-toggle .tooltip::after {
-    top: 0;
-    left: var(--spacer-3);
-    bottom: auto;
-    transform: translate3d(-50%, -100%, 0);
-    border-bottom: var(--caret-size) solid var(--color-bg-inverse);
-    border-top: none;
-  }
 }

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

@@ -4,15 +4,18 @@
     --caret-height: 7px;
     --caret-offset: 4px;
     --caret-border-color: var(--color-border);
-    --tooltip-x: -50%;
     --tooltip-caret-x: 0px;
+    --tooltip-caret-y: 0px;
     --tooltip-max-width: none;
 
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-portal-element);
+    pointer-events: none;
+
     opacity: 0;
     background-color: var(--color-bg-tooltip);
-    position: absolute;
-    z-index: 3;
-    left: 50%;
     max-width: var(--tooltip-max-width);
     padding: var(--spacer-1);
     color: var(--color-text-ontooltip);
@@ -26,6 +29,11 @@
     box-shadow: var(--elevation-300-tooltip);
     visibility: hidden;
 
+    &[data-wrap] {
+      white-space: normal;
+      overflow-wrap: break-word;
+    }
+
     &.field-error {
       background-color: var(--color-bg-danger);
       color: var(--color-text-ondanger);
@@ -51,11 +59,6 @@
     }
   }
 
-  .tooltip--wrap {
-    white-space: normal;
-    overflow-wrap: break-word;
-  }
-
   .tooltip__caret {
     position: absolute;
     pointer-events: none;
@@ -94,13 +97,6 @@
   }
 
   .tooltip--position-top {
-    top: 0;
-    transform: translate3d(
-      var(--tooltip-x),
-      calc(-100% - var(--caret-height) - var(--caret-offset) + 1px),
-      0
-    );
-
     .tooltip__caret {
       --color-border: var(--ramp-grey-700);
       top: calc(100% - 0.5px);
@@ -112,13 +108,6 @@
   }
 
   .tooltip--position-bottom {
-    top: 100%;
-    transform: translate3d(
-      var(--tooltip-x),
-      calc(var(--caret-height) + var(--caret-offset) - 1px),
-      0
-    );
-
     .tooltip__caret {
       bottom: calc(100% - 0.5px);
       transform: rotate(180deg);
@@ -134,28 +123,21 @@
   }
 
   .tooltip--position-left {
-    top: 50%;
-    left: 0;
-    transform: translate3d(calc(-100% - var(--caret-height) - var(--caret-offset)), -50%, 0);
-
     .tooltip__caret {
       top: calc(50% + 0.5px);
       left: calc(100% - 0.5px);
-      transform: translateY(calc(1 * var(--caret-width) / 2)) rotate(-90deg);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y)))
+        rotate(-90deg);
       transform-origin: top left;
     }
   }
 
   .tooltip--position-right {
-    top: 50%;
-    left: 100%;
-    transform: translate3d(calc(var(--caret-height) + var(--caret-offset)), -50%, 0);
-
     .tooltip__caret {
       top: calc(50% + 0.5px);
       left: unset;
       right: calc(100% - 0.5px);
-      transform: translateY(calc(1 * var(--caret-width) / 2)) rotate(90deg);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(90deg);
       transform-origin: top right;
     }
   }