jquery tooltip with while loop

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 ..

Stouffi · Accepted Answer · 2012-09-20 14:57:34Z

1

I have never seen a while loop without a condition. Your while loop should be formed like

while (condition) {
    //your code
}

where condition is an expression evaluated as true or false. However in your case, you may have an array of icon URL. You should use a for loop which is more convenient to loop in an array.

for ($i = 0; $i < count($images); $i++) {
    echo $images[$i]; // Assuming $images is an array.  
}

answered Sep 20, 2012 at 14:57

Stouffi

2582 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DragoN Over a year ago

i have added the orginal while loop i using

manavo · Accepted Answer · 2012-09-21 12:38:41Z

0

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.

edited Sep 21, 2012 at 12:38

answered Sep 20, 2012 at 13:41

manavo

1,8992 gold badges15 silver badges17 bronze badges

5 Comments

manavo Over a year ago

Can you include in your original post the whole while loop?

DragoN Over a year ago

i have added the orginal while loop i using

manavo Over a year ago

Hey DragoN, I've edited my answer now that I've understood the problem! I think that should fix it for you!

DragoN Over a year ago

thx , but with find it give me Null error, so i used $(this).siblings

manavo Over a year ago

Ah, you're right, I misread the html. I thought the .readitem was within .hint, but they are at the same level. I'll update my answer to have the correct code!

Collectives™ on Stack Overflow

jquery tooltip with while loop

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related