just test

primer · Feb 29, 2024 · 1697c8b · 1697c8b
1 parent d9ffbe8
commit 1697c8b
Showing 1 changed file with 68 additions and 40 deletions.
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -197,6 +197,30 @@ export const Tooltip = React.forwardRef(
 
     const openTooltip = () => {
       if (tooltipElRef.current && triggerRef.current && !tooltipElRef.current.matches(':popover-open')) {
+        //  can I set the position here?
+
+        console.log('SET POSITION')
+        /*
+         * TOOLTIP POSITIONING
+         */
+        const tooltip = tooltipElRef.current
+        const trigger = triggerRef.current
+        tooltip.setAttribute('popover', 'auto')
+        const settings = {
+          side: directionToPosition[direction].side,
+          align: directionToPosition[direction].align,
+        }
+
+        const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)
+
+        tooltip.style.top = `${top}px`
+        tooltip.style.left = `${left}px`
+
+        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after
+        const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string]
+        setCalculatedDirection(calculatedDirection)
+
+        console.log('OPEN TOOLTIP')
         tooltipElRef.current.showPopover()
       }
     }
@@ -240,51 +264,55 @@ export const Tooltip = React.forwardRef(
         }
       }
 
-      /*
-       * TOOLTIP POSITIONING
-       */
-      const tooltip = tooltipElRef.current
-      const trigger = triggerRef.current
-      tooltip.setAttribute('popover', 'auto')
-      const settings = {
-        side: directionToPosition[direction].side,
-        align: directionToPosition[direction].align,
-      }
+      // /*
+      //  * TOOLTIP POSITIONING
+      //  */
+      // const tooltip = tooltipElRef.current
+      // const trigger = triggerRef.current
+      // tooltip.setAttribute('popover', 'auto')
+      // const settings = {
+      //   side: directionToPosition[direction].side,
+      //   align: directionToPosition[direction].align,
+      // }
 
-      const positionSet = () => {
-        console.log('top', tooltip.style.top)
-        console.log('left', tooltip.style.left)
+      // const positionSet = () => {
 
-        const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)
+      // const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)
+      // setTooltipPosition([top, left])
+      // console.log('top', top)
+      // console.log('left', left)
 
-        tooltip.style.top = `${top}px`
-        tooltip.style.left = `${left}px`
-        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after
-        const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string]
-        setCalculatedDirection(calculatedDirection)
-      }
+      // // tooltip.style.top = `${top}px`
+      // // tooltip.style.left = `${left}px`
 
-      tooltip.addEventListener('toggle', event => {
-        // @ts-ignore for now
-        if (event.newState === 'open') {
-          positionSet()
-          console.log('Popover has been shown')
-        } else {
-          console.log('Popover has been hidden')
-        }
-      })
+      // // console.log('top', tooltip.style.top)
+      // // console.log('left', tooltip.style.left)
+      // // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after
+      // const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string]
+      // setCalculatedDirection(calculatedDirection)
+      // }
 
-      return () => {
-        tooltip.removeEventListener('toggle', event => {
-          // @ts-ignore for now
-          if (event.newState === 'open') {
-            positionSet()
-            console.log('Popover has been shown')
-          } else {
-            console.log('Popover has been hidden')
-          }
-        })
-      }
+      // tooltip.addEventListener('toggle', event => {
+      //   // @ts-ignore for now
+      //   if (event.newState === 'open') {
+      //     positionSet()
+      //     console.log('Popover has been shown')
+      //   } else {
+      //     console.log('Popover has been hidden')
+      //   }
+      // })
+
+      // return () => {
+      //   tooltip.removeEventListener('toggle', event => {
+      //     // @ts-ignore for now
+      //     if (event.newState === 'open') {
+      //       positionSet()
+      //       console.log('Popover has been shown')
+      //     } else {
+      //       console.log('Popover has been hidden')
+      //     }
+      //   })
+      // }
     }, [tooltipElRef, triggerRef, direction, type])
 
     return (