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

frontend/components/QueryFrequencyIndicator/_styles.scss

@@ -1,12 +1,12 @@
 .query-frequency-indicator {
   width: 90px;
-  display: flex;
   align-items: center;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 
   .icon {
+    vertical-align: middle;
     padding-right: $pad-small;
   }
 }

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;
     }
   }
 

frontend/components/TooltipTruncatedText/_styles.scss

@@ -1,4 +1,11 @@
+/** Modify with extreme caution as this CSS:
+- determines whether a tooltip is being rendered via useRef
+- is implemented in widely used checkbox labels
+- is highly sensitive */
+
 .tooltip-truncated-text {
+  max-width: 101%; // Required for implementation in checkbox labels
+
   .tooltip-truncated {
     max-width: 100%;
   }
@@ -8,6 +15,7 @@
     max-width: 99%;
     overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: middle;
   }
 
   .inner-text {