Popper-react leaving container boundaries

Question

I set up a simple example where this happens, note how the tooltip gets translate3d(-45px, 147px, 0px) which renders it outside the window boundaries:

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

Answer 1

There are some bugs caused by the configuration you are using.
Consider the following:

<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>

As you can see, I maed some modifications that fix the issue, but I had to remove the arrow, because it was causing bugs as well for this new config.
It fixes for now, but you may want to find a way to include the arrow.