Dropdowns: enhance with viewport boundary detection

[hramakumar]

Bug Report

eBayUI Version: 2.0.0-2 and skin 7.0.0-5

Description

when info tip has content that goes out og page boundary. it truncates.

Workaround

Screenshots

[ianmcburnie]

@seangates I believe we were going to add the logic for this in a future version. Is that correct? If so we can mark this as an enhancement ticket and I can remove the "blocker" label.

[PrashantAshok]

@ianmcburnie - I just had a chat with @agliga regarding this - I am running into this issue where the tooltip or infotip gets cuts off - in this case due to a parent having overflow: hidden. For a workaround, I can hardcoded the overlay position based on some condition.

Can this bug be prioritized so that component has the logic to adjust whenever it is getting cutoff?

[ianmcburnie]

@PrashantAshok Dealing with hidden overflow is a different issue altogether than viewport boundary though, right?

[ianmcburnie]

Cool looking library found by @PrashantAshok:

https://popper.js.org/

[ianmcburnie]

Here's another: https://www.floating-ui.com/

[PrashantAshok]

that's a nice one - looks like it was written by popper.js folks? And ideally any library that we pick, hopefully should be able to handle #1401 issue as well.

[agliga]

Currently the tour tip is pretty dumb when it comes to positioning. A good solution requires more JS code.
Good examples of adaptive positioning are in TippyJS and the good old qTips2.

[PrashantAshok]

Can we please look into prioritizing this issue along with #1401?

[ianmcburnie]

Anything that isn't directly related to Evo and Core4 is not going to be high on our list. We are probably going to have to rely on a fellowship or open source contribution for these two issues.

[agliga]

Will use this issue to track changing dropdowns to use floating ui