Hi everyone,
I’m running into a UI layout issue. I need a popup triggered by an element inside a scrollable container. The popup should extend beyond the container’s bounds, but I can’t get it to appear outside unless I set the container’s overflow to visible.
I’ve tried increasing the popup’s z-index, but that didn’t help.
Any tips or hacks to make this work?
Hi Hugo, can you show us how you created this popup?
Because regular popups / modal element, take the entire screen size by default and sit above everything:
Or are you trying to create a tooltip an are referring to the hover action you are showing in the picture? (the white capsule with “23/09/2025”…)
Hey Augustin,
You are right I was missing the technical term but I am indeed trying to implement the tooltip .
Overflows are tricky. I don’t have the answer to your question, but what if you just move the tooltip to the left of what you’re hovering? Or else you might want to try using the browser tooltip.
Hey Karl,
Thank you for taking the time to help, this tooltip is use at several places across my app so I wanted to avoid this solution but I think this is my only one.
You can always add X & Y properties on the component so you can control it individually. Just set default to what you have now.
Great Idea, thank you !
