Tooltips are cut outside content-div

**papaver** · 11-28-2012, 08:11 PM

Hello Adrian,
first many many thanks !!!

I have tried it - but it didn't work correctly with
$(this).children('.tooltip').appendTo('body')

The tooltip-text is false - it shows only and always the taxonomy, nothing else (no title, no year (ajahr))
and the tooltips are sticky

The right thing is: the tooltip-display is uncut, and the right tooltip-image are shown

Here is my php

Code:

<?php $image = rwmb_meta( 'metabox_screenshot2' );
	if ( $image != '' ) {?> 
	<div class="image">
						   
	       <div class="thumbnail-item" data-tooltip="tooltip_jq" >
		    <a class="fancybox" href="<?php the_permalink(); ?>" ><?php echo wp_get_attachment_image($image, 'homepage-thumb'); ?></a>
			    
			<div class="tooltip" id="tooltip_jq>
			  <a href="<?php the_permalink(); ?>" ><?php echo wp_get_attachment_image($image, 'homepage-tooltip-thumb'); ?></a>
			  <p><?php the_title(); ?></p> 
			  <p><?php the_taxonomies(array('template' => ' <span style="display:none;">%s:</span>%l ' ));  ?></p>
			  <?php $ajahr = rwmb_meta( 'metabox_ajahr' ); ?>
			       	<?php if ($ajahr) { ?>
			        <p><?php echo $ajahr; ?></p>
				<?php } else {?> <?php } ?>						              
			</div> <!--*tooltip-->
		</div> <!--*thumbnail-item-->
      </div> <!--*image-->

Thanks much

**jscheuer1** · 11-29-2012, 05:19 AM

With the page's current css both in the stylesheet and even inline for the spans, if you want all of the details to show up, you need to add the highlighted. However, I would recommend taking that out, and fixing the css.

Code:

<script type="text/javascript">
jQuery(function($){

	var aniObj = {duration: 'fast', complete: function(){$(this).remove();}};

	$('div.thumbnail-item').find('span, p').show().css({color: 'white'}).end().mouseenter(function(){

		$('body').children('div.tooltip').fadeOut(aniObj);

		var $this = $(this), o = $this.offset(), $child = $this.children('div.tooltip'),
		$w = $(window), wsl = $w.scrollLeft(), wrb = wsl + $w.width(), wst = $w.scrollTop(), wbb = wst + $w.height(),
		cw = $child.outerWidth(), ch = $child.outerHeight(),

		x = o.left + $this.width() / 2 - cw / 2,
		y = o.top + $this.height() / 2 - ch / 2;

		if(x < wsl) {x = wsl + 5;}
		if(x + cw > wrb) {x = wrb - cw - 5;}
		if(y < wst) {y = wst + 5;}
		if(y + ch > wbb) {y = wbb - ch - 5;}

		$child.clone().css({zIndex: 15, top: y, left: x, display: 'block'}).appendTo('body')
			.mouseleave(function(){
				$(this).fadeOut(aniObj);
			});
		});

});
</script>

Tested and works with your demo that you PM'ed us. Oh and I updated to jQuery 1.8.3, not sure if that matters. Another thing, all this garbage:

Code:

<!doctype html>
<!--[if lt IE 7 ]> <html lang="de-DE"> <![endif]-->
<!--[if IE 7 ]>    <html lang="de-DE"> <![endif]-->
<!--[if IE 8 ]>    <html lang="de-DE"> <![endif]-->
<!--[if IE 9 ]>    <html lang="de-DE"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="de-DE" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

will, at least in IE prevent the X-UA meta tag from working. I dealt with it like so:

Code:

<!doctype html>
<html lang="de-DE">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Then later, just after the tag for jQuery:

Code:

	<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script type="text/javascript">
$('html').addClass('no-js');
</script>
<!--<![endif]-->