css - 绝对位置 - 在屏幕范围内 float ( react )

Question

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

问题是词典中的文本可以出现在屏幕的任何地方，我需要对齐 float 框，这样它就不会显示在屏幕的外面

类似这个

只是我需要能够像这样设置 float 框的样式

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

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

类型错误
无法读取未定义的属性“className”

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

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

请帮忙

Answer 1

要了解从哪里开始，请查看 useCallback和 React 的引用。使用来自 node.getBoundingClientRect() 的给定信息，您可以计算工具提示是否在浏览器的可见区域之外。

//edit: 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 示例:https://codesandbox.io/s/lk60yj307