使用jQuery用PHP显示动态工具提示

I'm using a jQuery plugin to show balloons as tooltips.

I have the following table generate with 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>";
}
?>

The script below generates the tooltips:

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

I need to pass to this script each "$consulta_inst" id dynamically to generate a different toolltip for each "consulta" acording to this id, there is a way to iterate my table and select the elements with the selector "$"?

Add common class to all new elements and use $(this).attr("id") to get "id" of each element because you are using that in php request.

So you PHP code would be:

<?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>";
}
?>

jQuery code:

$(function() {
  $('.balloon').each(function(){
      $(this).balloon({
        url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + $(this).attr('id'),
        position: "bottom",
        offsetX: -30,
     });
   }); 
});

If you were to use a different approach (a class instead of IDs) you may make your life easier. See the example below from jQuery UI tooltip using classes you can add the tooltip to unlimited number of elements.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>
 
<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
 
 
</body>
</html>

</div>

here is a working jsfiddle demo.

<?php

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

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

http://jsfiddle.net/mdamia/3q0hj5ya/6/

Use .each() on the table's children <tr>
Find the id in the text of your row's first <td> column
Use the function you have already

Like this:

    $('#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,
        });

    });