Show tooltip over overflow:hidden - css

Question

I want to show tooltips next to items in a rather complex editor with custom scrolling. The tooltips should "escape" the container that has overflow: hidden set to limit the viewport.
Here is an example that shows the problem:
.container {
border: 1px black solid;
width: 200px;
height: 200px;
overflow: hidden;
}
.inner {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.column {
background-color: #99FF99;
padding: 25px;
}
.tooltip-container {
position: relative;
}
.content {
background-color: #9999FF;
width: 50px;
height: 50px;
}
.tooltip {
z-index: 1;
background-color: #FF9999;
display: none;
position: absolute;
left: 100%;
top: 0%;
white-space: nowrap;
}
.tooltip-container:hover .tooltip {
display: inline-block;
}
<div class="container">
<div class="inner" id="inner" style="margin-left: -40px; margin-top: -40px">
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
1
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 1
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
2
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 2
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
4
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 4
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
3
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 3
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
5
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 5
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
6
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 6
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
7
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 7
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
8
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 8
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
9
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 9
</div>
</div>
</div>
</div>
</div>
</div>
JSFiddle
Of course I searched for the problem and there are a lot solutions to the problem already. However I did not find one that solves my problem
The most cited solution is to make the tooltip position: absolute and add a wrapper outside of the div with overflow:hidden as can be seen here. This does not work in my case because the tooltip should be to the right of the item it describes. So I need the relative position on the tooltip container.
I tried wrapping the tooltip with position:relative and some offset in a wrapper with position:absolute. This did not work, as the wrapper catches the mouse hover for the tooltip. Also this means I have to know the size of the attached item.
I tried laying out the items in the tooltip-container horizontally and then use the standard position:absolute trick, but I could not make that work either.
Does anybody have an idea?
Constraints:
the tooltip appears in a container which has overflow:hidden and should escape it
the content in the container can be moved around
there are no fixed sizes
if possible it should be a CSS only solution (but most definitely no jQuery)
the tooltip should appear to the right of the attached item (bonus points if it can appear to any side of the item)
the tooltip may not only contain text but also other controls and inputs

Answer 1

The only CSS trick you can use is the position:fixed that you block with a null transform and you can have most of your constraints:
body {
min-height:200vh;
transform:translate(0,0);
}
.container {
border: 1px black solid;
width: 200px;
height: 200px;
overflow: hidden;
}
.inner {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.column {
background-color: #99FF99;
padding: 25px;
}
.tooltip-container {
position: relative;
}
.content {
background-color: #9999FF;
width: 50px;
height: 50px;
}
.tooltip {
z-index: 1;
background-color: #FF9999;
display: none;
position: fixed;
transform:translate(50px,-50px);
/*left: 100%;
top: 0%;*/
white-space: nowrap;
}
.tooltip-container:hover .tooltip {
display: inline-block;
}
<div class="container">
<div class="inner" id="inner" style="margin-left: -40px; margin-top: -40px">
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
1
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 1
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
2
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 2
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
4
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 4
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
3
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 3
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
5
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 5
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
6
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 6
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
7
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 7
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
8
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 8
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
9
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 9
</div>
</div>
</div>
</div>
</div>
</div>