0

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

dutzi
  • 1,880
  • 1
  • 18
  • 23

1 Answers1

2

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.

Azametzin
  • 5,223
  • 12
  • 28
  • 46
  • 1
    after hours of debugging and going over any possible documentation, this was the only answer that worked for me – Ivan Yulin Jun 13 '23 at 07:58