Question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="<?php $this->baseUrl()?>/public/js/jQuery.bubbletip-1.0.6.js" type="text/javascript"></script>
<link href="<?php $this->baseUrl()?>/public/js/bubbletip/bubbletip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
    for(i=1;i<12;i++){
    $('#a'+i).bubbletip($('#tip'+i), { deltaDirection: 'right' });
    }
});
</script>

code in header part

   <?php 
    foreach($this->nominations as $nomination)
            {
        for($i=1;$i<12;$i++){
        if($nomination['award'.$i]!=""){?>
        <div id="tip<?php echo $i?>" style="display:none;">
            <div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
            <div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
        </div>
     <?php }}
for($i=1;$i<12;$i++){
                    if($nomination['award'.$i]!=""){
                echo "<span id='a$i'>";
                echo "<img src='/public/assets/images/icons/star.png'/>";
                echo "</span>"; 
                }}

}?>

code in body section

My problem is when take my mouse over the stars of first iteration of foreach everything is working fine but its not working from second iteration i found that problem is with id a,tip becuause they are always becoming a1,a2.. and tip1,tip2… is there any solution

Answer 1

it is because every iteration of your forach loop creating elements of same id from a1 t a12
you need to put another level in names of ids .Try to use following

<?php
$count=0;
    foreach($this->nominations as $nomination)
            {
            $count++;
        for($i=1;$i<12;$i++){
        if($nomination['award'.$i]!=""){?>
        <div id="tip<?php echo $i?>_<?php echo $count?>" style="display:none;">
            <div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
            <div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
        </div>
     <?php }}
for($i=1;$i<12;$i++){
                    if($nomination['award'.$i]!=""){
                echo "<span id='a$i_$count'>";
                echo "<img src='/public/assets/images/icons/star.png'/>";
                echo "</span>"; 
                }}

}
<input type="hidden" id="total_iteration" name="total_iteration" value="<?php echo $count?>"/>
?>

And change you javascript code accordingly

<script type="text/javascript">
$(document).ready(function() {

var total=$('#total_iteration').val();
var t=0;
 for(t=1;t<total;t++)
 {

    for(i=1;i<12;i++){
    $('#a'+i+'_t').bubbletip($('#tip'+i+'_'+t), { deltaDirection: 'right' });
    }

    }
});
</script>

After some debigging above code should run the way you want i haven’t tested it but i guess the main problme is the elements of duplicate ids in each foreach iteration