Tooltip abgeschnitten von div container

Question

Ich habe diese viel gesucht und habe nicht gefunden, oder zumindest habe ich nicht in der Lage, die richtige Antwort zu implementieren.

Ich baue eine Website, in der ich ein scrollendes div mit einem Bild habe. Ich platziere Tooltips über bestimmte Teile des Bildes, aber wenn sie aktiviert werden, werden die Tooltips durch die Einschränkungen des div abgeschnitten.

Arbeitsbeispiel: http://navalage.neocities.org/menu1-test.html

Es ist im unteren Menü. Der Bühnen-Tooltip erscheint innerhalb des div, und ich habe die anderen draußen als ein Beispiel dafür, was ich von ihnen möchte.

Hoffentlich kann jemand helfen, danke!

CSS ist

<style> 
body { 
background-color: black; 
} 
.div {font-family: san-serif;} 




/* Tooltip container */ 
.tooltip { 
    position: relative; 
    display: inline-block; 
    border: 1px solid ; 
    border-color: rgba(255,255,255,1); 
/* If you want dots under the hoverable text */ 
} 
/* Tooltip text */ 
.tooltip .tooltiptext { 
    visibility: hidden; 
    width: 294px; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    border-radius: 6px; 
    border: 1px dashed white; 
    font-family: arial; 
    /* Position the tooltip text - see examples below! */ 
    position: absolute; 
    top: 0px; 
    opacity: 0; 
    -mox-transition: 1; 
    z-index:33; 
} 

/* Show the tooltip text when you mouse over the tooltip container */ 
.tooltip:hover .tooltiptext { 
    visibility: visible; 
    opacity: 1; 
    z-index:34; 
} 

</style> 

HTML ist;

<div style="z-index: 2; overflow: scroll; max-width: 240px; background-color: black; margin-left: 84px; margin-top: -54px; width: 213px; height: 50px; -moz-transform: skew(1.5deg);"> 







<!-- Stage --> 

<div class="tooltip" style="z-index: 3; margin-top:2px; margin-left: 0px; width: 35; height: 44px;"> 
<span style="margin-left: -84px; margin-top: -0px; z-index: 999;" class="tooltiptext"><b><u>Stage</b></u>: This is where you go to battle the enemy in the main story line (there isnt much of one).</span> 
</div> 

<img src="IMAGES/mainmenu.jpg" style="height:50px; margin-left: -5px; margin-top: -47px; -moz-transform: skew(-1.5deg);"> 

<!-- END --> 

<!-- Fleet --> 

<div class="tooltip" style="top: 489px; left: 130px; width: 35; height: 44px;"> 
<span style="margin-left: -120px; margin-top: -110px;" class="tooltiptext"><b><u>Fleet</b></u>: Here you can set up your base defence when somebody is attacking. You can also repair your ships and check on the current status of any fleets on a mission.</span> 
</div> 

<!-- END --> 

<!-- Alliance --> 

<div class="tooltip" style="position: absolute; top: 489px; left: 168px; width: 35; height: 44px;"> 
<span style="margin-left: -158px; margin-top: -91px;" class="tooltiptext"><b><u>Alliance</b></u>: Acces your alliance for donations, Elite Challenges (EC), Alliance fleet, Collect Supplies, Alliance War, and alliance technology.</span> 
</div> 

<!-- END --> 


<!-- Item --> 

<div class="tooltip" style="position: absolute; top: 489px; left: 206px; width: 35; height: 44px;"> 
<span style="margin-left: -196px; margin-top: -53px;" class="tooltiptext"><b><u>Item</b></u>: Acces your items, as well as the shop, and flash sale.</span> 
</div> 

<!-- END --> 

<!-- Mail --> 

<div class="tooltip" style="position: absolute; top: 489px; left: 244px; width: 35; height: 44px;"> 
<span style="margin-left: -234px; margin-top: -91px;" class="tooltiptext"><b><u>Mail</b></u>: This is where you recieve mail from system, friends, alliance leaders, escort, scout reports, and attack and defense reports. </span> 
</div> 

<!-- END --> 


<!-- NEXT --> 
<div class="tooltip" style="position: absolute; top: 489px; left: 282px; width: 25; height: 44px;"> 
<span style="margin-left: -272px; margin-top: 0px;" class="tooltiptext">Go to the next menu page 
<a href="menu2.html"> 
<button> 
Next</button> 
</a> 

</span> 
</div> 

<!-- END --> 






</div> 

Answer 1

Sie haben Ihre CSS zu ändern, in in diesem div und umspannen

<div class="tooltip" style="z-index: 3;margin-top:2px;margin-left: 0px;width: 35;height: 44px;position: absolute;"> 
<span style="margin-left: -84px;margin-top: -72px;/* z-index: 999; */" class="tooltiptext"><b><u>Stage</u></b>: This is where you go to battle the enemy in the main story line (there isnt much of one).</span> 
</div>