The jQuery tooltip works great for the first row of data in my table. After that, I only get the old school windows default tooltip in both IE and FF.
Here is the HTML that builds 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 lastly, my CSS:
#tooltip {
position: absolute;
border: 1px solid #111;
background-color: #eee;
padding: 5px;
font-size: 14px;
width: 400px; }
Seems odd that the first row works and the rest do not. Do I need some sort of looping javascript to use the tooltip for all rows of my table? I thought that jQuery tooltip would take care of that sort of thing.