Popper-react 离开容器边界

Question

我设置了一个发生这种情况的简单示例，请注意工具提示如何获取 translate3d(-45px, 147px, 0px)，从而将其呈现在 window 边界之外：

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>

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