Css 绝对位置-在屏幕限制内浮动（反应）

我正在尝试创建一个具有全局字典的应用程序；因此，当字典中出现的单词悬停时，旁边会出现一个带有定义的小框

问题是字典中的文本可以出现在屏幕上的任何位置，我需要对齐浮动框，这样它就不会显示在屏幕外面

与此类似

只是我需要能够设计浮动框，就像这样

请注意，框显示在屏幕外：

我厌倦了使用

ui材料

工具提示

但它会抛出

TypeError
无法读取未定义的属性“className”

我以前用jQuery解决过类似的问题，在jQuery中，我动态计算了框相对于屏幕和当前元素的位置

但我不知道如何在react中实现，主要是因为我不知道如何获得当前元素的位置

---

请帮助我

我可以用

---

但我仍然想知道在代码中正确的方法是什么。

要想知道从何处开始，请查看React并参考。使用

节点.getBoundingClientRect（）

中的给定信息，可以计算工具提示是否在浏览器的可见区域之外

//edit:useCallback在这种情况下不起作用，因为可见性是由css悬停触发的，并且尺寸还不能用于隐藏的工具提示。下面是一个可能的解决方案，使用useRef并使用useffect：

function ToolTip({ word, description }) {
  const [left, setLeft] = useState(0);
  const [hover, setHover] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      const { right } = ref.current.getBoundingClientRect();
      if (window.innerWidth < right) {
        setLeft(window.innerWidth - right);
      }
    }
  }, [hover]);

  return (
    <span
      desc={description}
      className="dashed"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => {
        setHover(false);
        setLeft(0);
      }}
    >
      {word}
      <div ref={ref} className="explain" style={{ left }}>
        <h2>{word}</h2>
        {description}
      </div>
    </span>
  );
}

函数工具提示（{word，description}）{
const[left，setLeft]=useState（0）；
const[hover，setHover]=useState（false）；
const ref=useRef（null）；
useffect（（）=>{
如果（参考电流）{
const{right}=ref.current.getBoundingClientRect（）；
if（window.innerWidth<右）{
设置左（window.innerWidth-右）；
}
}
}，[悬停]；
返回(
setHover（真）}
onMouseLeave={（）=>{
setHover（假）；
setLeft（0）；
}}
>
{word}
{word}
{说明}
);
}

---

Codepen示例：

您是如何在codesandbox链接上添加此编辑的？