1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| // Load this script once the document is ready
$(document).ready(function () {
// Get all the thumbnail
$('div.thumbnail-item').mouseenter(function(e) {
// Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
// Set the z-index of the current item,
// make sure it's greater than the rest of thumbnail items
// Set the position and display the image tooltip
$(this).css('z-index','15')
.children("div.tooltip")
.css({'top': y + 10,'left': x + 20,'display':'block'});
}).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");
});
}); |
Partager