Techniques de positionnement HTML en bas qui préservent les éléments enfants

Question

J'ai un texte avec une info-bulle. Je ne peux pas modifier les propriétés de la boîte elle-même, mais je souhaite que l'info-bulle soit placée au-dessus du texte. Voici mon code actuel :

.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>

Je pense que la meilleure façon d'atteindre ce que je veux est en tooltip-text中使用bottom: 100%，但是当我这样做时，bottom是相对于页面底部计算的，而不是相对于tt-container的底部。我想这是因为我必须在tt-container上使用position: relative，但这将导致提示框被框的边缘覆盖。我尝试在tt-container外部创建另一个带有position: relative的div mais le résultat est le même et je ne connais pas d'autre moyen. Est-ce 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>

Vous devez positionner le position: relative设置为position:absolute de l'élément parent de manière à ce qu'il soit positionné par rapport à l'élément parent. À cause de overflow: auto;, il n'est pas possible de faire sortir la boîte d'info-bulle de la boîte.