Using jQuery to display dynamic tooltips with PHP

Question

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 "$"?

See Jquery Tooltip for a much better tooltip utility. Or to see how tooltips usually work — RiggsFolly
– RiggsFolly, Commented Aug 25, 2015 at 22:03
I will see :) , but this is not the real problem, the problem is pass the id data for each row of the table dynamiclly to the script. — Rafael Camarda
– Rafael Camarda, Commented Aug 25, 2015 at 22:06
I think what @RiggsFolly is suggesting is to look at the jQuery Tooltip utility to solve your problem. If you were to use a class instead of individual IDs you would make your work a lot easier. You can unclog a toilet with a hammer, but is that the best way to do it? ;). — Helmut Granda
– Helmut Granda, Commented Aug 25, 2015 at 22:10
Thats exactly what I ment @HelmutGranda especially the part about unblocking the toilet — RiggsFolly
– RiggsFolly, Commented Aug 25, 2015 at 22:11

Chitrang · Accepted Answer · 2015-08-25 22:11:53Z

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,
     });
   }); 
});

Helmut Granda · Accepted Answer · 2015-08-25 22:12:38Z

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>

mdamia · Accepted Answer · 2015-08-25 22:14:01Z

0

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/

answered Aug 25, 2015 at 22:14

mdamia

4,5571 gold badge27 silver badges23 bronze badges

Comments

amurrell · Accepted Answer · 2015-08-25 22:15:01Z

0

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,
        });

    });

answered Aug 25, 2015 at 22:15

amurrell

2,4751 gold badge24 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using jQuery to display dynamic tooltips with PHP

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related