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

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


Thanks
damianb123Asked:
Who is Participating?
 
rgranlundCommented:
Without seeing your page, one way may be to set the z-index of the tooltip and change the margin.
.tooltip span {
left:100px;
top: -100px;
position:relative;
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.
0
 
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
0
 
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.
0
 
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.

http://qtip2.com/
http://tooltipsy.com/
http://jqueryui.com/tooltip/
0
 
damianb123Author Commented:
Great, Z-index fixed the problem nicely.  Cheers
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.

Advertise Here