Fleet UI: Tooltip shows dynamically on truncated text only (#20420)

frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx

@@ -49,7 +49,7 @@ const TooltipTruncatedTextCell = ({
   const isDefaultValue = value === DEFAULT_EMPTY_CELL_VALUE;
 
   return (
-    <div ref={ref} className={classNames}>
+    <div className={classNames}>
       <div
         className="data-table__tooltip-truncated-text"
         data-tip
@@ -57,6 +57,7 @@ const TooltipTruncatedTextCell = ({
         data-tip-disable={isDefaultValue || tooltipDisabled}
       >
         <span
+          ref={ref}
           className={`data-table__tooltip-truncated-text--cell ${
             isDefaultValue ? "text-muted" : ""
           } ${tooltipDisabled ? "" : "truncated"}`}

frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss

@@ -16,6 +16,7 @@
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
+      vertical-align: middle;
     }
   }