-
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
-
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]-->
-
Hello John
Thanks so much - it works perfectly !!
BTW: your "The Ocean Conservancy"-link recalls a 404
-
Great!
Oh, and I just clicked on the links for Ocean Conservancy in my sig and they worked fine. Perhaps it was just a temporary network glitch.
