fix: handle line clamp prop for tooltip

Author: Elessar1802

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -75,7 +75,7 @@ export default function ClipboardButton({
         >
             <button
                 type="button"
-                className={`dc__outline-none-imp p-0 flex bcn-0 dc__no-border ${rootClassName}`}
+                className={`dc__outline-none-imp p-0 flex dc__transparent--imp dc__no-border ${rootClassName}`}
                 onMouseEnter={handleEnableTippy}
                 onMouseLeave={handleDisableTippy}
                 onClick={handleCopyContent}

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -67,13 +67,7 @@ const SortableTableHeaderCell = ({
             onClick={isSortable ? triggerSorting : noop}
             disabled={disabled}
         >
-            <Tooltip
-                showOnTruncate={showTippyOnTruncate}
-                className="default-tt"
-                placement="top"
-                arrow={false}
-                content={title}
-            >
+            <Tooltip showOnTruncate={showTippyOnTruncate} content={title}>
                 <span className="dc__uppercase dc__ellipsis-right">{title}</span>
             </Tooltip>
             {renderSortIcon()}

src/Common/Tooltip/Tooltip.tsx

@@ -0,0 +1,33 @@
+import { useCallback, useState, cloneElement } from 'react'
+import TippyJS from '@tippyjs/react'
+import { TooltipProps } from './types'
+
+const Tooltip = ({
+    showOnTruncate = false,
+    alwaysShowTippyOnHover = false,
+    children: child,
+    ...rest
+}: TooltipProps) => {
+    const [isTextTruncated, setIsTextTruncated] = useState(false)
+
+    const refCallback = useCallback((node: HTMLDivElement) => {
+        if (node) {
+            setIsTextTruncated(node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight)
+        }
+    }, [])
+
+    return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
+        cloneElement(child, { ...child.props, ref: refCallback })
+    ) : (
+        <TippyJS
+            arrow={false}
+            placement="top"
+            {...rest}
+            className={`default-tt dc__word-break-all dc__mxw-200 ${rest.className}`}
+        >
+            {cloneElement(child, { ...child.props, ref: refCallback })}
+        </TippyJS>
+    )
+}
+
+export default Tooltip

src/Common/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip'

src/Common/Tooltip/types.ts

@@ -0,0 +1,14 @@
+import { TippyProps } from '@tippyjs/react'
+
+export interface TooltipProps extends TippyProps {
+    /**
+     * If true, show tippy on truncate
+     * @default false
+     */
+    showOnTruncate?: boolean
+    /**
+     * If true, wrap with tippy irrespective of other options
+     * @default false
+     */
+    alwaysShowTippyOnHover?: boolean
+}