We help IT Professionals succeed at work.

CSS tooltip going off edge of page - need help

damianb123
damianb123 asked
on
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
Comment
Watch Question

View Solution Only

Marco GasiFreelancer
Top Expert 2010

Commented:
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 Problems
Most Valuable Expert 2014

Commented:
@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.
Commented:
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.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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/
damianb123

Author

Commented:
Great, Z-index fixed the problem nicely.  Cheers