jQuery Tooltip ne fonctionne que pour la première ligne de la table

Question

L'info-bulle jQuery fonctionne très bien pour la première ligne de données de ma table. Après cela, je reçois seulement l'info-bulle par défaut de Windows old school dans IE et FF.

Voici le code HTML qui construit des données de table:

foreach ($displayData as $row) { 
echo '<tr bgcolor="' . $bgcolor[$a] . '">'; 
    echo '<td><span id="fancy" title="Course Description: - '.$row["TSTRDS"].'">'.$row["TSTRTP"].'</span></td>'; 
    echo '<td>'.$row["TSTRLC"].'</td>'; 
    echo '<td>'.$row["TSADDR"].'</td>'; 
    echo '<td>'.$row["TSDATE"].'</td>'; 
    echo '<td>'.$row["TSTIME"].'</td>'; 
    echo '<td>'.$row["TSCOST"].'</td>'; 
echo '</tr>'; 
echo '<tr bgcolor="' . $bgcolor[$a] . '">'; 
    echo '<td colspan="2"></td>'; 
    echo '<td>'.$row["TSCITY"].','.$row["TSST"].' '.$row["TSZIP"].'</td>'; 
    echo '<td colspan="3"></td>'; 
echo '</tr>'; 
$a = !$a; 

}

Voici mon javascript:

$(document).ready(function(){ 
$('#fancy').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    fixPNG: true, 
    showBody: " - ", 
    top: -15, 
    left: 5 
}); 

});

Et enfin, mon CSS:

#tooltip { 
position: absolute; 
border: 1px solid #111; 
background-color: #eee; 
padding: 5px; 
font-size: 14px; 
width: 400px; } 

semble étrange que les premiers travaux de ligne et le reste ne le font pas. Ai-je besoin d'une sorte de javascript en boucle pour utiliser l'info-bulle pour toutes les lignes de ma table? Je pensais que l'infobulle de jQuery s'occuperait de ce genre de chose.

Answer 1

Au lieu d'une carte d'identité comme ceci:

id="fancy" 

Vous devez utiliser une classe comme ceci:

class="fancy" 

puis le lier à l'aide d'un .class selector, comme ceci:

$('.fancy').tooltip({ 

Les identifiants sont supposés être uniques dans un document ... lorsque vous enfreignez cette règle, les choses commencent à faire peur :) Utilisez une classe dans s Ituations comme celui-ci.