Javascript 使用jQuery在PHP中显示动态工具提示

我使用jQuery插件将引出序号显示为工具提示

我使用PHP生成了下表：

<?php
for($i = 1; $i < sizeof($consulta_id); $i++){
    $data = str_replace('-', '/', $consulta_data[$i]);
    $data =  date('d/m/Y', strtotime($data)); 
    echo "<tr>";
    echo "<td>" .$consulta_id[$i]."</td>";
    echo "<td>" .$data."</td>";
    echo "<td>" .$consulta_hora[$i]."</td>";
    echo "<td>" .$consulta_desc[$i]."</td>";
    echo "<td id=\"".$i."\">".$consulta_inst[$i]."</td>";
    echo "<td>" .$consulta_prof[$i]."</td>";
    echo "</tr>";
}
?>

下面的脚本将生成工具提示：

<script>
$(function() {
      //var id;
      $('#id').balloon({
        url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + id,
        position: "bottom",
        offsetX: -30,
     });
  }
});
</script>

---

我需要动态地将每个$consulta_inst id传递给这个脚本，以便根据这个id为每个consulta生成不同的工具LTIP，有一种方法可以迭代我的表，并使用选择器$？

将公共类添加到所有新元素中，并使用$this.attrid获取每个元素的id，因为您在php请求中使用该id

因此，您的PHP代码应该是：

<?php
for($i = 1; $i < sizeof($consulta_id); $i++){
    $data = str_replace('-', '/', $consulta_data[$i]);
    $data =  date('d/m/Y', strtotime($data)); 
    echo "<tr>";
    echo "<td>" .$consulta_id[$i]."</td>";
    echo "<td>" .$data."</td>";
    echo "<td>" .$consulta_hora[$i]."</td>";
    echo "<td>" .$consulta_desc[$i]."</td>";
    echo "<td class=\"balloon\" id=\"".$i."\">".$consulta_inst[$i]."</td>";
    echo "<td>" .$consulta_prof[$i]."</td>";
    echo "</tr>";
}
?>

---

如果您使用不同的方法创建一个类而不是ID，那么您的生活可能会更轻松。请参见下面的示例，使用jQuery UI工具提示类，您可以将工具提示添加到无限数量的元素中

jQuery UI工具提示-默认功能 $function{ $document.tooltip； }; 标签{ 显示：内联块； 宽度：5em； } 可以附加到任何元素。当你盘旋 使用鼠标单击元素时，title属性将显示在元素旁边的一个小框中，就像本机工具提示一样

但由于它不是本机工具提示，因此可以设置样式。有没有用 也将相应地设置工具提示的样式

工具提示对于表单元素也很有用，可以在每个字段的上下文中显示一些附加信息

您的年龄：

将该字段悬停以查看工具提示

---

下面是一个正在运行的JSFIDLE演示

<?php

使用。每张桌子上的孩子 在行的第一列的文本中查找id 使用您已有的功能 像这样：

    $('#table').children('tr').each(function(){
        var tr = $(this);
        var id = tr.find('td').first().text();
        tr.balloon({
            url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + id,
            position: "bottom",
            offsetX: -30,
        });

    });

---

有关更好的工具提示实用程序，请参见。或者要查看工具提示通常的工作方式，我将看到：，但这不是真正的问题，问题是将表中每一行的id数据动态传递给脚本。将id放置在日期属性中。我认为@RiggsFolly的建议是查看jQuery工具提示实用程序来解决您的问题。如果您使用一个类而不是单个ID，那么您的工作就会容易得多。你可以用锤子打开厕所，但这是最好的方法吗；。这正是我对赫尔穆特格兰达的评价，尤其是关于打开厕所的部分

$(document).ready(function () {
    $('table tr').each(function () {
        $(this).hover(function () {
           var id = $(this).attr('id');
           alert(id);
       });
    });
});

    $('#table').children('tr').each(function(){
        var tr = $(this);
        var id = tr.find('td').first().text();
        tr.balloon({
            url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + id,
            position: "bottom",
            offsetX: -30,
        });

    });