CSS tooltip going off edge of page - need help

    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;

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>

Open in new window

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
I think you need some javascript in order to set dinamically tooltip positions. Maybe you find interesting this: http://www.dyn-web.com/code/tooltips/position.php
Dave BaldwinFixer of ProblemsCommented:
@Marco is right.  HTML and CSS can not solve that problem.  I have done it and it requires javascript to set the desired position of the 'tooltip' element.
Without seeing your page, one way may be to set the z-index of the tooltip and change the margin.
.tooltip span {
top: -100px;
z-index: 10;

Open in new window

Maybe try that and see if it makes a change that is going in the direction you are looking for.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I would add, why reinvent the wheel. There are plenty of tool tip plug ins available that have already probably started out "simple" and as bugs were found grew to something that works.

damianb123Author Commented:
Great, Z-index fixed the problem nicely.  Cheers
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.