diff --git a/changes/27667-fix-TooltipTruncatedText b/changes/27667-fix-TooltipTruncatedText
new file mode 100644
index 0000000000..b3d4073674
--- /dev/null
+++ b/changes/27667-fix-TooltipTruncatedText
@@ -0,0 +1 @@
+- Improve effectiveness of app-wide text-truncation-into-tooltip functionality.
diff --git a/frontend/components/TooltipTruncatedText/TooltipTruncatedText.tsx b/frontend/components/TooltipTruncatedText/TooltipTruncatedText.tsx
index 306c77ec35..90c6ea59e8 100644
--- a/frontend/components/TooltipTruncatedText/TooltipTruncatedText.tsx
+++ b/frontend/components/TooltipTruncatedText/TooltipTruncatedText.tsx
@@ -1,9 +1,10 @@
-import React, { useState, useRef, useLayoutEffect } from "react";
+import React, { useRef } from "react";
 import { uniqueId } from "lodash";
 import classnames from "classnames";
 
 import ReactTooltip from "react-tooltip";
 import { COLORS } from "styles/var/colors";
+import { useCheckTruncatedElement } from "hooks/useCheckTruncatedElement";
 
 interface ITooltipTruncatedTextCellProps {
   value: React.ReactNode;
@@ -30,22 +31,15 @@ const TooltipTruncatedText = ({
 
   // Tooltip visibility logic: Enable only when text is truncated
   const ref = useRef<HTMLInputElement>(null);
-  const [tooltipDisabled, setTooltipDisabled] = useState(true);
-
-  useLayoutEffect(() => {
-    if (ref?.current !== null) {
-      const scrollWidth = ref.current.scrollWidth;
-      const offsetWidth = ref.current.offsetWidth;
-      setTooltipDisabled(scrollWidth <= offsetWidth);
-    }
-  }, [ref]);
-  // End
+  const isTruncated = useCheckTruncatedElement(ref);
 
   const tooltipId = uniqueId();
   return (
-    <div ref={ref} className={classNames}>
+    <div className={classNames}>
       <div className="tooltip-truncated" data-tip data-for={tooltipId}>
-        <span className={tooltipDisabled ? "" : "truncated"}>{value}</span>
+        <div ref={ref} className={isTruncated ? "truncated" : undefined}>
+          {value}
+        </div>
       </div>
       <ReactTooltip
         place="top"
@@ -56,7 +50,7 @@ const TooltipTruncatedText = ({
         className="truncated-tooltip" // responsive widths
         clickable
         delayHide={200} // need delay set to hover using clickable
-        disable={tooltipDisabled}
+        disable={!isTruncated}
       >
         <>
           {tooltip ?? value}
diff --git a/frontend/components/TooltipTruncatedText/_styles.scss b/frontend/components/TooltipTruncatedText/_styles.scss
index eb0af333f9..1748ea01d0 100644
--- a/frontend/components/TooltipTruncatedText/_styles.scss
+++ b/frontend/components/TooltipTruncatedText/_styles.scss
@@ -11,8 +11,6 @@
   }
 
   .truncated {
-    display: inline-block;
-    max-width: 99%;
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;
diff --git a/frontend/hooks/useCheckTruncatedElement.ts b/frontend/hooks/useCheckTruncatedElement.ts
index 3e8bdc195f..2a3cb5f756 100644
--- a/frontend/hooks/useCheckTruncatedElement.ts
+++ b/frontend/hooks/useCheckTruncatedElement.ts
@@ -9,17 +9,27 @@ export const useCheckTruncatedElement = <T extends HTMLElement>(
 ) => {
   const [isTruncated, setIsTruncated] = useState(false);
 
+  const updateIsTruncated = (element: HTMLElement) => {
+    const { scrollWidth, clientWidth } = element;
+    setIsTruncated(scrollWidth > clientWidth);
+  };
+
   useLayoutEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        updateIsTruncated(entry.target as HTMLElement);
+      });
+    });
     const element = ref.current;
-    function updateIsTruncated() {
-      if (element) {
-        const { scrollWidth, clientWidth } = element;
-        setIsTruncated(scrollWidth > clientWidth);
-      }
+    if (element) {
+      updateIsTruncated(element);
+      resizeObserver.observe(ref.current as HTMLElement);
     }
-    window.addEventListener("resize", updateIsTruncated);
-    updateIsTruncated();
-    return () => window.removeEventListener("resize", updateIsTruncated);
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+      }
+    };
   }, [ref]);
 
   return isTruncated;