仅当文本溢出时才显示工具提示-材质用户界面

Question

我希望有一个仅在网格内的文本“溢出”时才激活的工具提示。

在我的示例中，工具提示应仅显示“非常长的标题”。 https://codesandbox.io/s/quirky-hamilton-9q6q6

我尝试使用useRef几乎没有成功，因为我比较的宽度具有相同的尺寸https://codesandbox.io/s/crazy-beaver-296w4 <-下面的代码

export default function App() {
  const titles = [
    "Short title",
    "Veeeeeeeeeeeeeeeeeeeery looooooooooooooog tiiiiiiiiiitle"
  ];

  const [isOverflowed, setIsOverflow] = useState(false);

  const textElementRef = useRef();
  const containerElementRef = useRef();

  useEffect(() => {
    setIsOverflow(
      textElementRef.current.scrollWidth >
        containerElementRef.current.clientWidth
    );
    console.log("A", textElementRef.current.scrollWidth); // Same dimension as one line below
    console.log("B", containerElementRef.current.clientWidth); // Same dimension as one line above
  }, []);

  return (
    <div className="App">
      {titles.map((title) => (
        <Grid item xs={6} ref={containerElementRef}>
          <Tooltip title={title} disableHoverListener={isOverflowed}>
            <OutlinedInput
              value={title}
              fullWidth
              disabled
              ref={textElementRef}
            />
          </Tooltip>
        </Grid>
      ))}
    </div>
  );
}