popper.js - Popper-react 离开容器边界

Question

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

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

标签： popper.jsreact-popper

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>

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