CSS tooltip going off edge of page - need help

Hi,
    I have a series of tooltips which work on hover over, however, if the tooltip is on an element at the bottom of the page, it simply goes off the page, and you miss half of it - how can I change it so it adjust to display it all?  

Here is the CSS, and the DIV which launches the code:

		.tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}

		.tooltip span {
			margin-left: -999em;
			position: absolute;

		}

		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family: Arial, Tahoma, Geneva, sans-serif;
			display:inline; position:absolute; color:#fff;
			margin-left: 0; width: 350px;
		}

		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}

		
		p {
    margin-top: 0;
}

Select all Open in new window

Code for displaying tooltip:

<p class="tooltip">First tooltip<span class="custom help"><em>Details</em>Hope this works</span></p>

Select all Open in new window

Thanks