Question

tooltip dont work with while loop
all the icons show me the info of first icon only
here is the php

$check = odbc_exec($conn,"select * from Item");
while($r = odbc_fetch_array($check)){
$info = $r['Info'];
$Image = $r['image'];
echo  "<span class='hint'><img src='$Image'></span>
<div class='readitem' style='display:none'>$info</div>";

}

jquery : tooltip

<script type="text/javascript">
$(document).ready(function() {
    var changeTooltipPosition = function(event) {
      var tooltipX = event.pageX - 10;
      var tooltipY = event.pageY + 10;
      $('div.tooltip').css({top: tooltipY, left: tooltipX});};
    var showTooltip = function(event) {
    var item = $('.readitem').html();

      $('<div class="tooltip"><center>'+ item + '</center></div>').appendTo('body');
      changeTooltipPosition(event);
    };
    var hideTooltip = function() {
       $('div.tooltip').remove();
    };
    $(".hint").bind({
       mousemove : changeTooltipPosition,
       mouseenter : showTooltip,
       mouseleave: hideTooltip
    });
});

</script>

any solution ?

Thank You ..

Answer 1

It’s a problem with the var item = $('.readitem').html(); line.

When you do $('.readitem'), it will match all elements on the page which have that class. When then calling .html() on that, it’ll return the html of the first matched element (thus always showing you the first one).

What you’d instead need to do, is look within the .hint on which you’re hovering, in order to find the sibling .readitem, and then use the html of that one.

So, this should work instead:

var item = $(this).siblings('.readitem').html();

$(this) should be the instance of the .hint on which you are hovering, so you’re trying to find the .readitem in the sibling elements of it.