Tooltip cut off by div container
<p>I've searched this a lot and have not found, or at least I haven't been able to implement,  the  proper answer.</p>

<p>I am building a site in which I have a scrolling div with an image. I am placing tooltips over certain parts of the image, but when they are activated, the tooltips are cut off by the constraints of the div.</p>

<p>Working example: <a href="http://navalage.neocities.org/menu1-test.html" rel="nofollow">http://navalage.neocities.org/menu1-test.html</a></p>

<p>It is in the bottom menu. The stage tooltip appears inside of the div, and I have the others outside as an example of what I want them to do.</p>

<p>Hopefully someone can help, thank you!</p>

<p>CSS is</p>

<pre><code>&lt;style&gt;
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;
}

&lt;/style&gt;
</code></pre>

<p>HTML is;</p>

<pre><code>&lt;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);"&gt;







&lt;!-- Stage --&gt;

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

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

&lt;!-- END --&gt;

&lt;!-- Fleet --&gt;

&lt;div class="tooltip" style="top: 489px; left: 130px; width: 35; height: 44px;"&gt;
&lt;span style="margin-left: -120px; margin-top: -110px;" class="tooltiptext"&gt;&lt;b&gt;&lt;u&gt;Fleet&lt;/b&gt;&lt;/u&gt;: 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.&lt;/span&gt;
&lt;/div&gt;

&lt;!-- END --&gt;

&lt;!-- Alliance --&gt;

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

&lt;!-- END --&gt;


&lt;!-- Item --&gt;

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

&lt;!-- END --&gt;

&lt;!-- Mail --&gt;

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

&lt;!-- END --&gt;


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

&lt;/span&gt;
&lt;/div&gt;

&lt;!-- END --&gt;






&lt;/div&gt;
</code></pre>