jQuery Tooltip работает только для первой строки таблицы - PullRequest
Новая
       5

jQuery Tooltip работает только для первой строки таблицы

3 голосов
/ 17 августа 2010

Подсказка jQuery отлично работает для первой строки данных в моей таблице.После этого я получаю всплывающую подсказку по умолчанию для окон старой школы в IE и FF.

Вот HTML-код, который создает данные таблицы: 

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;

}

Вот мой JavaScript: 

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

});

И, наконец, мой CSS: 

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

Кажется странным, что первый ряд работает, а остальные нет.Нужен ли какой-то цикл javascript, чтобы использовать всплывающую подсказку для всех строк моей таблицы?Я думал, что всплывающая подсказка jQuery позаботится о подобных вещах.

1 Ответ

6 голосов
/ 17 августа 2010

Вместо идентификатора, подобного этому: 

id="fancy"

Вы должны использовать такой класс: 

class="fancy"

затем свяжите его с помощью .class селектора , например: 

$('.fancy').tooltip({

Идентификаторы должны быть уникальными в документе ... когда вы нарушаете это правило, все становится страшным :) Используйте класс в таких ситуациях, как эта.

...