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:]
Code:
$(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).
Edit: <!-- 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:
HTML Code:
<!-- 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 -->
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?
Edit: #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.)
Bookmarks