fix: use onMouseEnter instead to calculate isTextTruncated

Author: Elessar1802

src/Common/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, cloneElement, useRef, useEffect } from 'react'
+import { useState, cloneElement } from 'react'
 import TippyJS from '@tippyjs/react'
 import { TooltipProps } from './types'
 
@@ -11,43 +11,27 @@ const Tooltip = ({
     ...rest
 }: TooltipProps) => {
     const [isTextTruncated, setIsTextTruncated] = useState(false)
-    const nodeRef = useRef<HTMLElement>(null)
 
-    const refCallback = useCallback((node: HTMLElement) => {
-        if (node) {
-            // NOTE: for line-clamp we need to check scrollHeight against clientHeight since orientation
-            // is set to vertical through -webkit-box-orient prop that is needed for line-clamp to work
-            // see: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
-            nodeRef.current = node
-            setIsTextTruncated(node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight)
-        }
-    }, [])
-
-    useEffect(() => {
-        if (!nodeRef.current) {
-            return
-        }
-        const hasTextOverflown =
-            nodeRef.current?.scrollWidth > nodeRef.current?.clientWidth ||
-            nodeRef.current?.scrollHeight > nodeRef.current?.clientHeight
-        if (hasTextOverflown && !isTextTruncated) {
+    const handleMouseEnterEvent: React.MouseEventHandler = (event) => {
+        const { currentTarget: node } = event
+        const isTextOverflowing = node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight
+        if (isTextOverflowing && !isTextTruncated) {
             setIsTextTruncated(true)
-        }
-        if (!hasTextOverflown && isTextTruncated) {
+        } else if (!isTextOverflowing && isTextTruncated) {
             setIsTextTruncated(false)
         }
-    })
+    }
 
     return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
-        cloneElement(child, { ...child.props, ref: refCallback })
+        cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
     ) : (
         <TippyJS
             arrow={false}
             placement="top"
             {...rest}
             className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200 ${rest.className}`}
         >
-            {cloneElement(child, { ...child.props, ref: refCallback })}
+            {cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })}
         </TippyJS>
     )
 }