Allow popper to overlay reference element when flip fails?

[onecrayon]

Is it possible to configure Popper to overlap the reference element if all of the flip sides fail to provide enough space for the element? I am writing a deck builder site for a card game, and card names in the site have small popper boxes that open up with details about the card. This works fine with the default settings on desktop platforms, but on mobile if the card name is in the center of the screen scrolled to the center, all of the flip strategies fail and the popper ends up getting stuck to the left side (creating a scrollbar). I would rather in that case have the popper fall back to covering the element, but am not sure how to go about doing this.

[FezVrasta]

Hi, this is not supported out of the box, but it could be achieved with a custom modifier, the docs have a lot of information on how to write one yourself.

[onecrayon]

I was afraid of that; okay, I'll look into implementing a custom modifier. Thanks!

[wardyment]

Currently struggling with similar issue. I need the popper to appear on top of the reference but also obey collision rules. Kinda like an additional placement called 'cover' or 'center'. My popper is a small callout with a few form elements and has its own closing mechanism. But not much screen real estate so I'd like it to sit on top of the reference button.

[atomiks]

A custom offset modifier will do that: https://codesandbox.io/s/focused-thunder-y7zp9?file=/src/index.js