Wie erreicht man einen kaskadierenden Effekt von Elementen in HTML?
<p>Ich wollte einen benutzerdefinierten Tooltip für dieses Element erstellen, aber er befindet sich in einem Feld, das nicht genug Platz zum Anzeigen des Tooltips bietet, sodass er einfach abgeschnitten wird (eigentlich kann ich zu „Es wird angezeigt“ scrollen, weil <code> ;overflow</code> ist auf <code>auto</code> eingestellt, aber ich möchte, dass es ohne Scrollen sichtbar ist. Gibt es eine Möglichkeit, die Anzeige außerhalb der Grenzen zu ermöglichen? Ich habe versucht, <code>z-index</code> zu verwenden, aber das hat nicht funktioniert. </p>
<p>Das habe ich gesagt:</p>
<p>
<pre class="brush:css;toolbar:false;">.box {
Breite: 100px;
Höhe: 100px;
Überlauf: automatisch;
Randstil: solide;
Randfarbe: rot;
}
.tooltip{
Polsterung oben: 20px;
Position: relativ;
Anzeige: Inline-Block;
}
.tooltip .tooltiptext {
Anzeige: keine;
maximale Breite: 60 vw;
Mindestbreite: 15vw;
Hintergrundfarbe: weiß;
Randstil: solide;
Rahmenfarbe: #1a7bd9;
Position: absolut;
Z-Index: 1000000;
}
.tooltip:hover .tooltiptext {
Bildschirmsperre;
}</pre>
<pre class="brush:html;toolbar:false;"><div class='box'>
<div class='tooltip'> Tooltip beim Bewegen der Maus anzeigen
<div class='tooltiptext'>
Wow, das ist großartig, das ist ein epischer Tooltip-Text
</div>
</div>
</div></pre>
</p>
<p>BEARBEITEN: Wichtig ist, dass das Bewegen des Mauszeigers auf das Element funktioniert, nicht auf die Box, in der es sich befindet. </p>