波普尔反应离开容器边界

Question

我建立了一个简单的例子，请注意，工具提示如何获取translate3d（-45px，147px，0px），并将其呈现在窗口边界之外：

https://codesandbox.io/s/stupefied-blackwell-nll6m

Answer 1

有些错误是由您使用的配置引起的。
请考虑以下内容：

<Popper
  placement="bottom"
  modifiers={{
    preventOverflow: {
      escapeWithReference: false
    }
  }}
>
  {({ ref, style, outOfBoundaries }) => {
    return (
      <div>
       <div
         className="tooltip"
         style={{ opacity: outOfBoundaries ? 0 : 1, ...style }}
         ref={ref}
       >
       Popper
       </div>
      </div>
    );
  }}
</Popper>

如您所见，我进行了一些修改以解决此问题，但是我不得不删除箭头，因为它也导致了此新配置的错误。
目前已修复，但是您可能想找到一种包含箭头的方法。