jQuery Tooltip仅适用于表的第一行 [英] jQuery Tooltip only works for first row of table

问题描述

jQuery工具提示非常适合我表格中的第一行数据。之后，我只在IE和FF中获得旧学校窗口默认工具提示。

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.

这是构建表数据的HTML：

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; 

}

这是我的javascript：

Here is my 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工具提示可以解决这类问题。

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.

推荐答案

而不是像这样的ID：

id="fancy" 

你应该使用这样的类：

class="fancy" 

然后使用 .class 选择器，如下所示：

then bind it using a .class selector, like this:

$('.fancy').tooltip({

ID在文档中应该是唯一的..当你打破这个规则时，事情开始变得可怕:)在这样的情况下使用一个类。

IDs are supposed to be unique in a document...when you break this rule, things start to get scary :) Use a class in situations like this one.

这篇关于jQuery Tooltip仅适用于表的第一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！