divコンテナでツールチップを切り捨てました

Question

私はこれをたくさん検索しましたが見つかりませんでした、または少なくとも私は適切な答えを実装することができませんでした。

画像をスクロールしているサイトを構築しています。私はイメージの特定の部分にツールチップを配置していますが、アクティブにすると、ツールチップはdivの制約によって切り取られます。

の作業例：http://navalage.neocities.org/menu1-test.html

それは下のメニューです。ステージのツールチップがdivの内側に表示され、私はそれらの欲しいものの例として外の他のものを持っています。

誰かが助けてくれることを祈っています。ありがとうございます！

CSSはHTMLがある

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

です。

<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

あなたはこのdivの中であなたのCSSを変更する必要が

とスパン

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