绝对位置-在屏幕范围内浮动（反应）

Question

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

问题在于字典中的文本可以出现在屏幕上的任何位置，并且我需要对齐浮动框，以便它不会显示在屏幕的外侧

与此类似

我只需要能够像这样对浮动框设置样式

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

我厌倦了使用ui material ToolTip 但会抛出

TypeError Cannot read property 'className' of undefined

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

但是我不知道如何在反应中做到这一点，主要是因为我不知道如何动态地获取当前元素的位置。

请帮助

Answer 1

要了解从哪里开始，请查看See Plotting FFT Columbia vs Jtransform和React的参考文献。利用node.getBoundingClientRect()的给定信息，您可以计算出工具提示是否在浏览器的可见区域之外。

//编辑：在这种情况下，useCallback将不起作用，因为可见性是由css悬停触发的，并且隐藏的工具提示尚未提供尺寸。这是一种使用useRef并可能使用useEffect的可能解决方案：

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

Codepen示例：useCallback

Answer 2

我能够做到

https://www.npmjs.com/package/@syncfusion/ej2-react-popups

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