JQuery hint only works for the first row of a table

Question

The jQuery tooltip works fine for the first row of data in my table. After that, I get only the standard old-school windows tooltip in IE and FF.

Here is the HTML that builds the table data:

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; 

}

Here is my javascript:

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

});

And finally, my CSS:

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

It seems strange that the first line works, and the rest does not. Do I need some javascript loop to use tooltip for all rows of my table? I thought the jQuery hint would take care of this.

Answer 1

Instead of type identifier:

id="fancy" 

You should use a class like this:

class="fancy" 

, .class , :

$('.fancy').tooltip({

... , :) , .