TP-2126: Tooltip overflow behaviour

packages/gridImagePicker/src/ImageItem.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { Box } from '@oneloop/box'
@@ -24,6 +24,10 @@ const ImageItem = ({
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item.id })
   const [size, isLoadingSize, isErrorSize] = useSize(item.src)
   const [height, width, aspectRatio, isLoadingAspectRatio, isErrorAspectRatio] = useAspectRatio(item.src)
+  const wrapperRef = useRef(null)
+  const [tooltipPosition, setTooltipPosition] = useState({ left: 0, top: 0 })
+  const [isTooltipShowable, setIsTooltipShowable] = useState(false)
+
   const { isDraggingActive, isMaxSelectableReached, itemsAreReady } = status
   const { maxSizeInMB, minAspectRatio, maxAspectRatio } = config
   const isLoading = item.loading
@@ -33,6 +37,20 @@ const ImageItem = ({
   const backgroundImage = item.loading || item.fetchError ? '' : `url(${item.src})`
   const unclickable = !isItemClickable(item, isMaxSelectableReached, itemsAreReady)
 
+  useEffect(() => {
+    const handleHideTooltip = () => {
+      setIsTooltipShowable(false)
+    }
+
+    document.addEventListener('wheel', handleHideTooltip)
+    document.addEventListener('scroll', handleHideTooltip)
+
+    return () => {
+      document.removeEventListener('wheel', handleHideTooltip)
+      document.removeEventListener('scroll', handleHideTooltip)
+    }
+  }, [])
+
   useEffect(() => {
     const id = item.id
     const sizeError = !isNaN(maxSizeInMB) && (size > maxSizeInMB)
@@ -43,45 +61,73 @@ const ImageItem = ({
     handleUpdateItem({ id, size, sizeError, height, width, aspectRatio, aspectRatioError, fetchError, loading })
   }, [size, isLoadingSize, isErrorSize, aspectRatio, isLoadingAspectRatio, isErrorAspectRatio])
 
+  const calculateTooltipPosition = () => {
+    const parent = document.querySelector('.gridImagePickerContainer')
+
+    const parentRects = parent.getBoundingClientRect()
+    const imageRects = wrapperRef.current.getBoundingClientRect()
+
+    const left = imageRects.left - parentRects.left + imageRects.width / 2
+    const top = imageRects.top - parentRects.top
+
+    setTooltipPosition({ left, top })
+  }
+
+  const handleMouseMove = () => {
+    const shouldShowTooltip = Boolean(tooltipErrorText)
+    calculateTooltipPosition()
+    setIsTooltipShowable(shouldShowTooltip)
+  }
+
   return (
-    <Box
-      ref={setNodeRef}
-      as="button"
-      className="imageItemWrapper"
-      onClick={() => handleClick(item)}
-      data-dragging={isDraggingActive}
-      __css={{ backgroundImage }}
-      style={{
-        transform: CSS.Transform.toString(transform),
-        transition,
-      }}
-      { ...attributes }
-      {...listeners }
-    >
+    <Box className="imageItemOuterWrapper">
       <Box
-        className="imageItemBlanket"
-        data-light={unclickable}
-        data-dark={item.checked}
-        data-grey={isError}
-      />
-
-      <Box className="imageItemCount" data-visible={item.checked}>
-        {item.position}
-      </Box>
+        ref={(node) => {
+          setNodeRef(node)
+          wrapperRef.current = node
+        }}
+        as="button"
+        className="imageItemWrapper"
+        onClick={() => handleClick(item)}
+        onMouseMove={handleMouseMove}
+        data-dragging={isDraggingActive}
+        __css={{ backgroundImage }}
+        style={{
+          transform: CSS.Transform.toString(transform),
+          transition,
+        }}
+        { ...attributes }
+        {...listeners }
+      >
+        <Box
+          className="imageItemBlanket"
+          data-light={unclickable}
+          data-dark={item.checked}
+          data-grey={isError}
+        />
 
-      <Box className="imageItemCover" data-visible={item.position === 1}>
-        <Box className="imageItemCoverText"> {texts.cover} </Box>
-      </Box>
+        <Box className="imageItemCount" data-visible={item.checked}>
+          {item.position}
+        </Box>
 
-      <Box className="imageItemCheckbox" data-active={item.checked} data-visible={!unclickable}>
-        <Check className="imageItemIconCheck" color="white" />
-      </Box>
+        <Box className="imageItemCover" data-visible={item.position === 1}>
+          <Box className="imageItemCoverText"> {texts.cover} </Box>
+        </Box>
+
+        <Box className="imageItemCheckbox" data-active={item.checked} data-visible={!unclickable}>
+          <Check className="imageItemIconCheck" color="white" />
+        </Box>
 
-      <Box className="imageItemError" data-visible={isError && !isLoading}>
-        <Icon icon="icon-error" className="imageItemIconError" />
+        <Box className="imageItemError" data-visible={isError && !isLoading}>
+          <Icon icon="icon-error" className="imageItemIconError" />
+        </Box>
       </Box>
 
-      <Box className="imageItemTooltip" data-showable={Boolean(tooltipErrorText)}>
+      <Box
+        className="imageItemTooltip"
+        data-showable={isTooltipShowable}
+        __css={{ left: tooltipPosition.left, top: tooltipPosition.top }}
+      >
         {tooltipErrorText}
       </Box>
     </Box>

packages/gridImagePicker/styles/GridImagePicker.css

@@ -7,6 +7,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  position: relative;
 }
 
 .gridImagePicker {

packages/gridImagePicker/styles/ImageItem.css

@@ -15,6 +15,10 @@
   width: 88px;
 }
 
+.imageItemWrapper * {
+  pointer-events: none;
+}
+
 .imageItemWrapper[data-dragging="true"] {
   cursor: grabbing;
 }

packages/gridImagePicker/styles/ImageItemCover.css

@@ -7,7 +7,6 @@
   height: 100%;
   left: 0;
   opacity: 0;
-  pointer-events: none;
   position: absolute;
   top: 0;
   transition: opacity 100ms linear;

packages/gridImagePicker/styles/ImageItemSmallElements.css

@@ -11,7 +11,6 @@
   left: 8px;
   line-height: 16px;
   opacity: 0;
-  pointer-events: none;
   position: absolute;
   top: 8px;
   width: 24px;
@@ -45,7 +44,6 @@
   justify-content: center;
   opacity: 0;
   padding: 2px;
-  pointer-events: none;
   position: absolute;
   right: 8px;
   top: 8px;
@@ -70,7 +68,6 @@
   height: 24px;
   justify-content: center;
   opacity: 0;
-  pointer-events: none;
   position: absolute;
   right: 8px;
   top: 8px;

packages/gridImagePicker/styles/ImageItemTooltip.css

@@ -10,6 +10,7 @@
   max-width: 240px;
   opacity: 0;
   padding: 4px 8px;
+  pointer-events: none;
   position: absolute;
   text-align: left;
   top: 0;
@@ -23,6 +24,6 @@
   display: none;
 }
 
-.imageItemWrapper[data-dragging="false"]:hover .imageItemTooltip {
+.imageItemOuterWrapper:hover .imageItemWrapper[data-dragging="false"] + .imageItemTooltip {
   opacity: 1;
 }