HTML proper positioning for bottom without affecting children - html

Question

I have a text with a tooltip in the box. I cannot change the properties of the box itself, but I would like to make it so that the tooltip is above the text. Here is what I have now:
.tt-container .tooltiptext {
display: none;
background-color: white;
border-style: solid;
position: absolute;
border-color: #1a7bc9;
color: #000;
text-align: left;
border-radius: 6px;
padding: 15px 15px;
width: 300px;
/*bottom: 100%;*/
}
.tt-container:hover .tooltiptext {
display: block;
}
.tt-container {
border-style: solid;
display: inline;
}
.box {
/*I cannot make changes to this*/
width: 200px;
height: 200px;
border-style: solid;
border-color: red;
overflow: auto;
}
<div class="box"><br><br>
<div class="tt-container">
<span class="tooltiptext">some more text which takes a bunch of space maan</span>
text
</div>
</div>
I think that the best way to achieve what I want would be doing bottom: 100% inside tooltip-text, but when I do so, the bottom is computed relative to the bottom of the page, not the bottom of the tt-container. I figure that this is because I have to use position: relative on the tt-container, but this will make it so that the tooltip is covered under the edge of the box. I have tried creating another div outside the tt-container with position: relative, but the result is the same and I don't know of any other ways. Is it possible to make this happen?

Answer 1

.tt-container .tooltiptext {
display: none;
background-color: white;
border-style: solid;
position: absolute;
bottom:100%;
border-color: #1a7bc9;
color: #000;
text-align: left;
border-radius: 6px;
padding: 15px 15px;
width: 300px;
}
.tt-container:hover .tooltiptext {
display: block;
}
.tt-container {
border-style: solid;
display: inline;
position:relative;
}
.box {
/*I cannot make changes to this*/
width: 200px;
height: 200px;
border-style: solid;
border-color: red;
overflow: auto;
}
<div class="box"><br><br>
<div class="tt-container">
<span class="tooltiptext">some more text which takes a bunch of space maan</span>
text
</div>
</div>
You should make the parent position: relative for position:absolute to know that it should be positioned relative to the parent.
It's not possible to make the tooltip go out of the box, because it has overflow: auto;.