feat: show tippy on sortable table header if truncated through prop

Author: Elessar1802

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { Tippy } from '..'
 import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg'
 import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg'
 import { SortingOrder } from '../Constants'
@@ -41,6 +42,7 @@ const SortableTableHeaderCell = ({
     title,
     disabled,
     isSortable = true,
+    showTippyOnTruncate = false,
 }: SortableTableHeaderCellProps) => {
     const renderSortIcon = () => {
         if (!isSortable) {
@@ -65,7 +67,15 @@ const SortableTableHeaderCell = ({
             onClick={isSortable ? triggerSorting : noop}
             disabled={disabled}
         >
-            <span className="dc__uppercase dc__ellipsis-right">{title}</span>
+            <Tippy
+                showOnTruncate={showTippyOnTruncate}
+                className="default-tt"
+                placement="top"
+                arrow={false}
+                content={title}
+            >
+                <span className="dc__uppercase dc__ellipsis-right">{title}</span>
+            </Tippy>
             {renderSortIcon()}
         </button>
     )

src/Common/SortableTableHeaderCell/types.ts

@@ -44,4 +44,5 @@ export interface SortableTableHeaderCellProps {
      * @default true
      */
     isSortable?: boolean
+    showTippyOnTruncate?: boolean
 }