Info box inside overflow:hidden container should be visible outside - html

Question

I have a div table which has a lot of content inside, because of that I added overflow:hidden so the table is scrollable.
Inside I have an info link which on hover displays some additionally information.
The problem is, the info box on the first row of the table is most likely outside of the table and this piece gets cut off.
How to make this hidden piece infobox outside of the table visible, without removing overflow:hidden or using JS?
.outertable{
display:block;
overflow-x:auto !important;
}
.info:hover:after{
background: rgba(75,75,75, 0.85);
bottom: 32px;
color: #fff;
content: attr(data-tooltip);
left: -100px;
position: absolute;
z-index: 999;
width: 200px;
}
Here is some small example on jsfiddle:
https://jsfiddle.net/0tcbadk8/10/
.outertable {
box-shadow: 3px 3px 7px -3px rgba(0, 0, 0, 0.30);
display: block;
overflow-x: auto !important;
}
div.table {
display: table;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
div.tr {
display: table-row;
}
div.maintr {
display: table-row;
}
.maintr .td {
padding: 15px 5px;
}
div.td {
display: table-cell;
padding: 10px 5px;
text-align: center;
vertical-align: middle;
}
.info {
display: inline;
position: relative;
}
.info:hover:after {
background: #333;
background: rgba(75, 75, 75, 0.85);
border-radius: 5px;
bottom: 32px;
color: #fff;
content: attr(data-tooltip);
left: -100px;
padding: 15px 25px;
position: absolute;
z-index: 999;
width: 200px;
}
.info:hover:before {
border: solid;
border-color: #4b4b4b transparent;
border-width: 12px 12px 0 12px;
bottom: 20px;
content: "";
left: 0%;
position: absolute;
z-index: 99;
}
<br/><br/><br/><br/><br/><br/>
<div class="outertable">
<div class="table offerstyle">
<div class="tr">
<div class="td fixinfonooverflow"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"><img class="" data-original="images/logo/3.png" title="" alt="" src="images/logo/3.png" style=""></div>
<div class="td">BLABLABLA</div>
<div class="td">
<div class="nonewline more_info" title="4.8 von 5 Sternen und 5 Bewertungen"><i class="fa fa-star ratingtwo" aria-hidden="true"></i><i class="fa fa-star ratingtwo" aria-hidden="true"></i><i class="fa fa-star ratingtwo" aria-hidden="true"></i><i class="fa fa-star ratingtwo" aria-hidden="true"></i><i class="fa fa-star-half-o ratingtwo"
aria-hidden="true"></i></div>
</div>
<div class="td">
<a class="info" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a est ut justo interdum efficitur at id tortor. Cras lacinia, sapien sit amet suscipit sodales, mi velit bibendum risus, at dictum ligula mauris vel dui."><i class="fa fa-info-circle" aria-hidden="true"></i> info</a>
</div>
<div class="td">TEST<br>TEST2<br>TEST3<br></div>
</div>
<div class="tr">
<div class="td fixinfonooverflow"></div>
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
</div>
</div>

Answer 1

I see 3 options:
1) If you know the contents of the info box and the content is fixed size you could increase the spacing of the table to accommodate the size of the info box to stay "inside".
2) Quick solution: Instead of position: absolute you could use position: fixed on the info box, this works if it fits your needs (won't scroll with the content, it will stay fixed).
.info:hover:after{
background: #333;
background: rgba(75,75,75, 0.85);
border-radius: 5px;
color: #fff;
content: attr(data-tooltip);
left: 400px;
top: 0;
padding: 15px 25px;
position: fixed;
z-index: 999;
width: 200px;
}
.info:hover:before{
border: solid;
border-color: #4b4b4b transparent;
border-width: 12px 12px 0 12px;
content: "";
left: 420px;
top: 173px;
position: fixed;
z-index: 99;
}
Updated jsfiddle: https://jsfiddle.net/0tcbadk8/27/
3) Create the info box dynamically using jQuery / Javascript and position it depending on the position of the trigger element and checking if it overflows outside of boundaries of the table and reposition it. In the same time it could be place outside of overflow:hidden container in markup.

Answer 2

Demo :
https://jsfiddle.net/0tcbadk8/56/
Explanation:
You need to remove position: relative from parent in order to make it pop out of overflow: hidden
But now we cannot use top,right,bottom or left because that won't be relative to parent but will be relative to body
So in order to position them with translate and margin only
I will also require the width of owner of pseudo elements
So added JS which adds a --width css variable
Using some basic logic and maths, added the translateX and translateY to the pseudo elements
PS:
Here's a css only solution http://jsfiddle.net/keygcptw/1/ But the only problem is tooltip is positioned on extreme right instead of center