When user clicks on a trigger, the popup appears near to the trigger element.
There is a limited number of locations where the popup can appear: bottom left, top center, and etc. (13 positions in total).
However, when popup contents are too big to be placed in any of these positions, reactjs-popup simply defaults to some top right position.
In the screenshot above there's a lot of space to fit most (not 100%) of the popup content on the page. However, reactjs-popup descides to place the popup the way it's unusable even though there's way more space under the trigger element at least to try to fit the popup.
The most expected way would be to ignore vertical part of the requested positioning and just place it vertically to show as much of the content as possible. The same with horizontal positioning. If popup doesn't fit on the screen on both dimensions - who cares where the trigger is located, right? Just show as much of the content as possible, and don't worry about obscuring the trigger element - it doesn't matter when popup doesn't fully fit.
Even though these are the edge cases, they should behave the way users would expect.
If there's no solution that would fit everyone, maybe it makes sense to allow position customization? If there was a callback with the position calculation results, I could adjust the results in my handler.
When user clicks on a trigger, the popup appears near to the trigger element. There is a limited number of locations where the popup can appear: bottom left, top center, and etc. (13 positions in total). However, when popup contents are too big to be placed in any of these positions, reactjs-popup simply defaults to some top right position. In the screenshot above there's a lot of space to fit most (not 100%) of the popup content on the page. However, reactjs-popup descides to place the popup the way it's unusable even though there's way more space under the trigger element at least to try to fit the popup. The most expected way would be to ignore vertical part of the requested positioning and just place it vertically to show as much of the content as possible. The same with horizontal positioning. If popup doesn't fit on the screen on both dimensions - who cares where the trigger is located, right? Just show as much of the content as possible, and don't worry about obscuring the trigger element - it doesn't matter when popup doesn't fully fit.
Even though these are the edge cases, they should behave the way users would expect. If there's no solution that would fit everyone, maybe it makes sense to allow position customization? If there was a callback with the position calculation results, I could adjust the results in my handler.