SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tooltip running off the page

    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!
    Follow Me On Twitter: BryceRay

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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!
    Follow Me On Twitter: BryceRay

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by bar338 View Post
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •