HTML bottom positioning techniques that keep child elements unaffected

Question

I have a text with a tooltip. I can't change the properties of the box itself, but I want the tooltip to be placed above the text. This is my current code:

.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">一些占用大量空间的文本</span>
        文本
    </div>
</div>

I think the best way to achieve what I want is to use bottom: 100% in tooltip-text, but when I do this, bottom is calculated relative to the bottom of the page, not relative to the bottom of tt-container. I think this is because I have to use position: relative on the tt-container, but this will cause the tooltip to be covered by the edge of the box. I tried creating another div outside the tt-container with position: relative but the result is the same and I don't know any other way. Is this possible?

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">一些更多的占用空间的文本</span>
        文本
    </div>
</div>

You should set the parent element's position: relative to position:absolute to position it relative to the parent element. Due to overflow: auto;, the tooltip box cannot be made outside the box.