Popper-core: Avoid multiple poppers overlapping each other.

[miracle2k]

I want to show two popups. As it stands, the popups potentially overlap, but flipping one of them would fix it. Is this something that could be added to popper?

[FezVrasta]

Hi! It would be a cool feature to add, but at the moment I haven't the bandwidth to work on it.

If you'd like to implement it please let me know and I'll try to help you as I can.

[FezVrasta]

Just leaving here some idea.

The modifier API could look like this:

// This is going to be used to store the needed informations of each of the registered poppers.
// each popper instance will have to share the same store to share the info between them
const poppersStore = [];

new Popper(ref, pop, {
  modifiers: {
    avoidPoppersCollisions: {
      enabled: true,
      store: poppersStore,
      fn: theModifierFn,
    }
  }
});

Talking about the implementation, it should be quite easy to update the boundaries coordinates with the other poppers' positions so that then the built-in modifiers can just work without being aware of the modifier.

[claviska]

To describe a use case, I'm using Popper for toolbars in an editor. There's a primary toolbar that sits above a content region and a handful of secondary toolbars that appear depending on the user's selection (e.g. selecting a table shows the table toolbar). Since the position of the user's selection is arbitrary, the toolbars overlap in certain cases.

I'd love to see poppers with avoidCollisions enabled simply move out of the way — not necessarily a full flip, but a gentle nudge to make room.

Willing to post a bounty if you have time for this in the coming weeks 😄

[claviska]

Giving this a little bump. @FezVrasta — I'm still willing to post a bounty for this modifier if you have the bandwidth.

[FezVrasta]

Hey. Thanks for the interest but I don't think I will be able to work on it in the foreseeable future 😕

[atomiks]

Can our new composable detectOverflow modifier solve this? e.g. you'd set the area to another popper element?

[FezVrasta]

I’m not sure, I think it works only for parent elements

[FezVrasta]

I'm going to close this issue, not because it's a bad idea, but because if someone will ever implement it, it will happen outside of this repository, as a 3rd party modifier.

[atomiks]

I'd like to attempt to solve this. @claviska are you able to create a CodeSandbox demonstrating the UI you mentioned? It would help a lot in creating the correct behavior

[claviska]

I can't produce one tonight, but I'll try to get you a fiddle in the next day or two.

If you need something sooner, try placing two buttons next to each other on the page. The first shows a popper (e.g. tooltip or popover or whatever) on focus, the other shows one on hover.

1. Click the first to show the popper on focus.
2. While it's showing, hover over the second. The poppers will likely overlap depending on the content.

My use case only requires two at a time, but to make it more flexible the modifier can simply move all overlapping poppers below each other (e.g. so they stack — I'm not too picky as long as they don't overlap). An optional offset would be handy, but not required. 😄

I'm still willing to provide a bounty for this, btw. Thanks for your interest!