Popper-react 离开容器边界

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>

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