I have implemented a basic JavaScript/CSS code to show a tooltip/enlarged photo feature.
You can visit the actual page here. The thumbnail images are located on the right-hand side.
The issue I am facing is that when using the mouseenter function, the tooltip doesn't display the correct image. It was working fine initially, but after some CSS changes, it started pulling the wrong image. How can I ensure that the correct image is shown in the tooltip, which is defined in the class tooltip? Thank you.
<script type="text/javascript">
// This script loads once the document is fully loaded
$(document).ready(function () {
// Get all the thumbnail elements
$('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 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;
// Make the tooltip 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");
});
});
</script>
<style>
.thumbnail-item {
position: relative;
float: left;
margin: 0px 5px;
}
.thumbnail-item a {
display: block;
}
.thumbnail-item img.thumbnail {
border:3px solid #ccc;
}
.tooltip {
display: none;
position: absolute;
padding: 8px 0 0 8px;
}
.tooltip span.overlay {
background: url(<?php echo base_url(); ?>3_party/imgtooltip/images/overlay.png) no-repeat;
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 350px;
height: 200px;
}
</style>
<div class="picture"><?php echo '<img class="main_picture_box" src="' . base_url() . 'uploads/big_' . $main_image->image . '">'; ?></div>
<div class="thumb-contain">
<!--picture loop max 25-->
<?php
foreach ($images as $i) {
echo '<div class="thumbnail-item">';
echo '<a href="#">';
echo '<img class="test" id="big_pic" onclick="swap()" src="' . base_url() . 'uploads/small_' . $i->image . '" class="thumbnail"/>';
echo '</a>';
echo '<div class="tooltip">';
echo '<img src="' . base_url() . 'uploads/' . $i->image . '" alt="" width="330" height="185" />';
echo '<span class="overlay"></span>';
echo '</div>';
echo '</div>';
}
?>