Javascript 如何仅在使用省略号时激活工具提示？

当我说出两个名字时。在整个页面中，我可以看到这两个名称，所以没有工具提示或省略号，没关系。但是，当我调整大小时，省略号会出现，但工具提示直到我重新加载页面时才会激活

const Name = () => {
  const ref = useRef(null);
  const [tooltip, setTooltip] = useState(false);
  useEffect(() => {
    if (!tooltip && ref.current.offsetWidth > ref.current.scrollWidth) {
      setTooltip(true);
    }
  }, [tooltip]);

  if (tooltip) {
    return (
      <Tooltip
        styles={nameTooltipStyle}
        content={name.map(nm => (
          <div key={nm.id} className="tooltipName">
            <div className="label">
              <li className="list">{nm.name}</li>
            </div>
          </div>
        ))}
      >
        <div ref={ref} className="name">
          {Name}
        </div>
      </Tooltip>
    );
  }
  return (
    <div ref={ref} className="name">
      {name}
    </div>
  );
};

const Name=（）=>{
const ref=useRef（null）；
const[tooltip，setTooltip]=useState（false）；
useffect（（）=>{
如果（！tooltip&&ref.current.offsetWidth>ref.current.scrollWidth）{
设置工具提示（true）；
}
}，[工具提示]；
如果（工具提示）{
返回(
(
{nm.name}
))}
>
{Name}
);
}
返回(
{name}
);
};

如果要在调整窗口大小时激活工具提示，可以使用

调整大小

事件侦听器：-

window.addEventListener('resize', function(){
    if (!tooltip && ref.current.offsetWidth > ref.current.scrollWidth) {
        setTooltip(true);
    }
});

---

请注意，调整窗口大小时会多次触发此事件。我鼓励您使用

去抖动的概念来优化性能。
您好，谢谢您的回答！但是，我的意思是，当整个页面中有5个名称时，我不需要工具提示和省略号，因为我可以看到所有名称，当我调整页面大小时，会出现省略号和工具提示，但是工具提示不起作用，但是当我重新加载页面时，它开始了work@Marcus即使页面上只有一个名称且窗口大小已调整，要激活工具提示，您需要监听
resize
事件并执行
setTooltip
。