Javascript .children issue / tooltip

Question

I am using a simple javascript/css to display a tooltip / enlarged photo function.

The actual page can be found here. It's the thumbnail images on the right hand side.

The problem is that for some reason the mouseenter function, the tooltip does not seem to be pulling the correct image. It's working but not pulling the correct image. It was working previously, but then I changed up the css. The question is how I get the image to show up in the tooltip, the image in class tooltip. Thanks.

<script type="text/javascript">
// 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");
    });
});
</script>
<style>

.thumbnail-item { 
/* position relative so that we can use position absolute for the tooltip */
position: relative; 
float: left;  
margin: 0px 5px; 
}

.thumbnail-item a { 
display: block; 
}

.thumbnail-item img.thumbnail {
border:3px solid #ccc;  
}

.tooltip { 
/* by default, hide it */
display: none; 
/* allow us to move the tooltip */
position: absolute; 
 /* align the image properly */
 padding: 8px 0 0 8px; 
}

.tooltip span.overlay { 
    /* the png image, need ie6 hack though */
    background: url(<?php echo base_url(); ?>3_party/imgtooltip/images/overlay.png)     no-repeat; 
    /* put this overlay on the top of the tooltip image */
    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>';
}
?>

Answer 1

In listings_layout.css at around line 167 you have this:

#tbroker-content .contain .thumb-contain .thumbnail-item img{
  width:52px;
  height:52px;
  margin:2px;
}

which targets all the images under .thumbnail-items. just specify that you only want images that are children of an anchor to get the width and height.

#tbroker-content .contain .thumb-contain .thumbnail-item a img{
  width:52px;
  height:52px;
  margin:2px;
}