Tooltips are cut outside content-div

[papaver]

The display of my tooltips in the content area is cut off from the surrounding div-container.
When the tooltip extends into the header- or footer-div-area, it will be cut.


<script type="text/javascript">
$(document).ready(function () {
$('div.thumbnail-item').mouseenter(function(e) {

x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;

$(this).css('z-index','15')
.children("div.tooltip")
.css({'top': y - 150,'left': x - 50,'display':'block'});

}).mousemove(function(e) {

x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;

}).mouseleave(function() {

$(this).css('z-index','1')
.children("div.tooltip")
.animate({"opacity": "hide"}, "fast");
});

});
</script>

Have tried to solve the problem with appendTo ('body') or append, but by then the php-generated content tooltip no longer display correctly, and all tooltips appear in the upper left corner of the screen.
What option is there to let the tooltips display correctly?

Thanks much!

[traq]

What option is there to let the tooltips display correctly?

Without seeing the HTML markup you're using, it's difficult to say.

Please post a link to the page on your site that contains the problematic script so we can check it out.
If your page is not yet published, you can make a test case using online tools like jsfiddle (http://jsfiddle.net).

[papaver]

Hello Adrian,
thanks for your quick response!

Here http://jsfiddle.net/SWs3P/1/
you can see my cut tooltips

Thanks so much!

[papaver]

Hello Adrian,
thanks for your quick response!

Here http://jsfiddle.net/SWs3P/1/
you can see my cut tooltips

Thanks so much!




P.S.: To remove "overflow:hidden" inside #content did not work on my wordpress-site, only on jsfiddle - unfortunately



a few hours later ....

I have catched it – it is the jscrollpane
http://jscrollpane.kelvinluck.com/basic.html
It needs „overflow: auto“, and this is the reason for the cut tooltips.
But it is not the solution for my problem - I need scrollpane and full-tooltip-display.

How can I manipulate the tooltip-display with jQuery for a completely tooltip-display?

And here is the updated jsfiddle http://jsfiddle.net/SWs3P/4/

Thanks so much!

[traq]

I think your best approach here would be, when you check the position of the mouse, to also check how close you are to the top/bottom/left/right side of the scrollpane. Compare that to the width/height of the tooltip, and reposition it appropriately.

I am not familiar enough with javascript to give a concrete suggestion on how to implement this, but I'll experiment with it if I have some free time tomorrow.

[papaver]

Hello Adrian,
thanks for your answer.
I have tried another version
http://jsfiddle.net/DkUPL/2/
In jsfiddle you see nothing (unfortunaly)
On my test-page, the tooltip-display is not cut – jeh
But the tooltips are shown always the same Tooltip-image with the same Tooltip-text, regardless which parent image are hovered.
(image and text are generated/queried with php)

If you experiment with the tooltip-display, the tooltip-dimension is differently, not always the same. Therefore I would display the tooltip over the parent-image.

Thanks so much

[jscheuer1]

In your last post there you say it's working except for the tip always being the same, that sounds like a problem with how you are having PHP generate the tips and/or how you're having PHP generate some other part of the javascript and/or HTML code.

I'm a bit busy now. When I get more time I will have a closer look if traq hasn't helped you figure it out by then. traq's very good at this sort of thing.

I'm making this post to perhaps point him in the right direction, though I doubt he needs that, and since you PM'ed me for help on it, to keep this thread on my radar (since I'm now in it, I will notice when it gets added to).

It would help if we had a link to the actual test page, the one where you say it's now working but with the same tip always showing.

[traq]

I've been fiddling with checking the tooltip's position against the borders of the scrollpane, but I'm not getting the results I'm intending so far. I'm not figuring out why, just yet. I'll let you know as soon as I have something productive (what I have now would just be confusing).

[jscheuer1]

The OP says they have that part solved. If they give us a link to that page, that might help you figure it out.

[traq]

whoops, sorry, missed that part.

[the OP does not want to make the actual page public, at this point, but this is the relevant javascript:]

$(document).ready(function () {

// Get all the thumbnail
$('div.thumbnail-item').hover(function(e) {

$('.tooltip').appendTo('body')
.hide()
.css({
top: e.pageY -150,
left: e.pageX -150})
.fadeIn(320);



}).mousemove(function(e) {

// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;

// This line causes the tooltip will follow the mouse pointer
// $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});

}).mouseleave(function() {

// Reset the z-index and hide the image tooltip
$(this).css('z-index','1')
.children("div.tooltip")
.animate({"opacity": "hide"}, "fast");
});

});
again, papaver, you'll get lots more useful help if you make your actual page available for people to see...

I think the problem is $('.tooltip').appendTo('body') - you're selecting all ".tooltip" elements, so you'll always end up append()ing the first one (not necessarily the one you want).

<!-- ignore this. see edit #2 below. -->
nevermind my suggestion: you've changed your HTML and moved the tooltips outside their thumbnails, so there's no easy way to associate the two. You might add a data-tooltip attribute to the thumbnails, and an id to the tooltip so you can find the appropriate tooltip when you hover on a thumbnail. Example:
<!-- code -->

<div class="tooltip" id="tooltip_42">
<p>your tooltip
</div>

<!-- tons of code -->

<div class="thumbnail-item" data-tooltip="tooltip_42">
<img>
</div>

<!-- tons more code -->
$('div.thumbnail-item').hover(function(e) {

var tooltip_id = $(this).attr( 'data-tooltip' );

$( '#'+tooltip_id ).appendTo('body')
.hide()
.css({
top: e.pageY -150,
left: e.pageX -150})
.fadeIn(320);
}) // . . .
p.s. I'm not sure there's any need to append the tooltip to the body...? It's already in the DOM, does it not work to just reposition it and fadeIn?
#2

nevermind, nevermind:

I think I was right the first time. Forget about my first edit. In your original code, get rid of $('.tooltip').appendTo('body') and try $(this).children('.tooltip').appendTo('body') instead.

I still think appendTo is a bad idea, however. Maybe John can weigh in on this. Here's the problem as I see it currently: in order for the tooltips to not be "cut off" by the scrollpane, they need to be *outside* the scrollpane (that's why you're trying to append them to the end of the body). Would it work to, instead, have a "tooltip-container" outside the scrollpane, and just load the contents of the appropriate tooltip into it when needed?

I'm sorry about the guesswork. Your page is a bit difficult to experiment with.

(BTW: it's not really needed anymore, but if you want to assign an id to each tooltip, they each need to be unique[different]. You're also missing the closing quote [ " ], which is why jQuery isn't finding any of them.)

[papaver]

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


<?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]

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.


<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:


<!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:


<!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:


<!-- 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]-->

[papaver]

Hello John
Thanks so much - it works perfectly !!

BTW: your "The Ocean Conservancy"-link recalls a 404

[jscheuer1]

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.