[SOLUTION] CSS tooltip going off edge of page

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

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.

LVL 32

Marco GasiFreelancerCommented: 2015-03-14

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

LVL 85

Dave BaldwinFixer of ProblemsCommented: 2015-03-14

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

LVL 8

rgranlundCommented: 2015-03-14

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

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

LVL 56

Scott Fell, EE MVEDeveloper & EE ModeratorCommented: 2015-03-14

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/

damianb123Author Commented: 2015-03-29

Great, Z-index fixed the problem nicely. Cheers

CSS tooltip going off edge of page - need help

Who is Participating?