Tooltip needs to be in overflow: auto container without being cut off
css, flexbox, overflow, tooltip
Solution
Solution found here.
They just move the `position: relative` from the element that contains the tooltip to the container that surrounds the overflow element
https://jsfiddle.net/dqrkkvkL/1/
Problem
I'm building a sort-of desktop app. The page itself must not be scrollable, but the different content parts within it do. Therefore, they have `overflow: auto`. But now I need to show tooltips and they are cut off at the container edges because of that. All answers to other questions about this that I found recommended to not clip the overflow (hidden, auto, scroll), but that's not an option for me unfortunately. And since I can't be sure what height my container and my tooltip will have, because both get their data externally, I can't place the tooltip in the middle of it and be sure that it won't be cut off. So I need a solution that doesn't cut off the tooltips. Working example of my basic markup: ``` #flex { display: flex; flex-direction: column; height: 200px; width: 100%; } #box1, #box2 { flex 1; overflow-y: auto; /* without overflow the tooltip would work, but I need overflow */ } #box1 { background-color: lightgrey; } #box2 { background-color: lightblue; } span { position: relative; text-decoration: underline; } #tooltip { background-color: lightgreen; display: none; position: absolute; height: 100px; width: 200px; bottom: 0px; } span:hover #tooltip { display: block; } ``` ``` <div id="flex"> <div id="box1"> Flex Content <br>Flex Content <br>Flex Content <br>Flex Content <br>Flex Content <br>Flex Content <br> </div> <div id="box2"> Flex Content with <span>Tooltip <div id="tooltip"> Tooltip text </div></span> <br>Flex Content <br>Flex Content <br>Flex Content <br>Flex Content <br>Flex Content <br>Flex Content <br> </div> </div> ``` https://jsfiddle.net/dqrkkvkL/