Tooltip running off the page

**bar338** · May 5, 2011 07:44

First off, I'm not sure if this thread belongs in the css or JavaScript forum. I'm working on integrating tool-tips into a table in an application I'm working on. I have the tool-tips working the way I would like them to with one exception. If the tool-tip loads on an element on the far right side of the page the tool-tip will load off the screen and is impossible to view.

I've created a full example to demonstrate this problem. Simply load this HTML file and go to the cells on the right side of the screen. Hover your mouse over the right edge of the right-most cell and you will be unable to see the tool-tip. I've been stuck on this issue for a while, I'd appreciate any advise you could offer.

Code HTML4Strict:

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
		<script type="text/javascript">
		  $(document).ready(function() {
			loadTooltip();
		  });
 
			loadTooltip = function(){
				$('.show-tooltip-text').each(function(){
					var toolTip = $(this);
					if(toolTip.parent().is(':visible')){
						toolTip.parent().hover(showTooltip, hideTooltip);
					}else{
						toolTip.parent().show();
						toolTip.parent().hover(showTooltip, hideTooltip);
						toolTip.parent().hide();
					}
				});
			};
 
			showTooltip = function(e)
			{
				var text = $('.show-tooltip-text', this);
				if (text.attr('class') !== 'show-tooltip-text'){
					return false;
				}
 
				text.fadeIn(0)
					.css('top', e.pageY)
					.css('left', e.pageX+10);
 
				return false;
			};
 
			hideTooltip = function(e)
			{
				var text = $('.show-tooltip-text', this);
				if (text.attr('class') !== 'show-tooltip-text'){
					return false;
				}
 
				text.fadeOut(0);
			};
		</script>
		<style type="text/css">
		table tr td{
			border: 1px solid #000;
			padding: 4px;
		}
 
		span.show-tooltip-text {
			background-color:#FFFDF0;
			border:1px solid #000;
			color:black;
			display:none;
			font-size:.9em;
			font-weight:normal;
			padding:6px;
			padding-left:12px;
			padding-right:12px;
			position:absolute;
			z-index:9999;
		}
 
		span.show-tooltip-text div span {
			font-weight:bold;
		}
		</style>
</head>
<body>
	<table>
		<tr>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
		</tr>
		<tr>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
			<td><span class="show-tooltip-text"><div>Some Tooltip Text</div><div>Some Tooltip Text</div><div>Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</td>
		</tr>
	</table>
</body>
</table>

Thanks!

**ralph.m** · May 5, 2011 08:08

Ultimately it's CSS positioning the tooltips, but it is JS determining what the CSS actually is, so I'd say the JavaScript needs to be addressed. Unless you just want to ditch the JS altogether and use CSS alone for the hovering, which is quite easy.

**bar338** · May 5, 2011 09:01

Originally Posted by ralph.m

Ultimately it's CSS positioning the tooltips, but it is JS determining what the CSS actually is, so I'd say the JavaScript needs to be addressed. Unless you just want to ditch the JS altogether and use CSS alone for the hovering, which is quite easy.

I'm flexible with going to an all CSS solution if we can get it to work. I've adapted my code like this:

Code HTML4Strict:

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
		<style type="text/css">
		table tr td{
			border: 1px solid #000;
			padding: 4px;
		}
 
		td.show-tooltip-text div{position:relative;}/* set stacking context -*/
		td.show-tooltip-text div span{
			position:absolute;
			top:-999em;/* hide message initially*/
			left:-70px;
			width:250px;
			padding:6px;
			padding-left:12px;
			padding-right:12px;
			background-color:#FFFDF0;
			border:1px solid #000;
			font-size:.9em;
			font-weight:normal;
			color:black;
			text-decoration:none;
			z-index:9999;
		}
		td.show-tooltip-text div:hover{visibility:visible}/* ie bug needed to make span show*/
		td.show-tooltip-text div:hover span{top:50px;}/* show image on hover*/
 
		td.show-tooltip-text div span div span {
			font-weight:bold;
		}
		</style>
</head>
<body>
	<table>
		<tr>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
		</tr>
		<tr>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
			<td class="show-tooltip-text"><div><span><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div><div>Some Tooltip Text Some Tooltip Text Some Tooltip Text</div></span>Test Content Test Content Test Content Test Content</div></td>
		</tr>
	</table>
</body>
</table>

I have two remaining problems with this code:
-It does not appear to work in IE6 as it should. I see your examples do so I'm not sure why my slightly modified css is not.
-Still cuts off a little bit of the text when hovering near the left/right boundaries. Is there anyway to adjust this with more padding on the outside of the screen edge?

Thanks for your help!

**ralph.m** · May 5, 2011 16:54

Originally Posted by bar338

I have two remaining problems with this code:
-It does not appear to work in IE6 as it should. I see your examples do so I'm not sure why my slightly modified css is not.

Yes, IE6 doesn't recognize :hover on anything but <a>s I'm afraid, so a little JS fix would be needed for IE6 in that case (if you really care. I've long forgotten about that browser.)

Or maybe you could change from spans to <a> instead, and set the hove on those. Note that you really shouldn't have divs inside spans (never have a block element inside an inline element).

Still cuts off a little bit of the text when hovering near the left/right boundaries. Is there anyway to adjust this with more padding on the outside of the screen edge?

That's where I'd start to put a special class or id on the final cells, and have a special rule that the popup has a different position there. (It's a common thing to do for drop lists as well).

User Tag List

Thread: Tooltip running off the page

Thread Tools

Display

Tooltip running off the page

Bookmarks

Bookmarks

Posting Permissions