在html表格单元格内将mysql数据显示为工具提示<td>

Question

Hi guys im trying to populate mysql row as a tooltip with mouseover however i just only populate first row as a tool tip do you have any idea what im missing thanks a lot for your help here is my code which is show only first row as a tooltip box.

  $(function () {
        $(".test").hover(
            function () {

                            var toolTipHtml = $("#ToolTipDiv_ +'$id'").clone();

                $(this).append(toolTipHtml);
                toolTipHtml.show("slow");
            },
            function () {
                var toolTipHtml = $(this).find(".tooltip");

                toolTipHtml.hide();
                toolTipHtml.remove();
            }
        );

    });

     echo "<table>";
    while($row = mysql_fetch_array($result))
    {
          $id = $row['id_out_org'];
               echo "<tr>";  
             echo "<td>" .$row['KG']."</td>";        
            echo "<td class='test'>" .$row['B']."</td>";
            echo "<td >" .$row['B']."</td>";
            echo  "<td class='test'>"; 
            echo "<div id = 'ToolTipDiv_"/$id/"' class='tooltip' style='background-color: White; display: none; width: 20%;'>";

            echo "Total: $ "; echo $totalp = $total + $fuel;

            echo "</div>";
             "</td>";


            echo "</tr>";           
        }
        echo "</table>";

Answer 1

Please change your id of <div> <div id = 'ToolTipDIv'

Id must be unique for each element That the problem in your code

Answer 2

Hardik is right, you're only getting the first row because each of the div's that are created in the while statement has an ID of 'ToolTipDiv' so jquery just selects the first one. What you might can do is give the div a second class name and select it by the class so that all of the div's can be utilized like you're wanting. I think this will work...

jQuery:

$(function() {
$(".test").hover(
function() {
    var toolTipHtml = $(this).next('.ToolTipDiv').clone();
    $(this).append(toolTipHtml);
    toolTipHtml.show("slow");
}, function() {
    var toolTipHtml = $(this).find(".tooltip");

    toolTipHtml.hide();
    toolTipHtml.remove();
});
});​

PHP/HTML:

echo "<table class='style1' border='0' >";
while($row = mysql_fetch_array($result)) {
echo "<tr>";  
echo "<td>" .$row['KG']."</td>";        
echo "<td class='test'>" .$row['A']."</td>";
echo "<td >" .$row['B']."</td>";
echo "<td class='test'>"; 
echo "<div id = 'ToolTipDIv' class='tooltip ToolTipDiv' style='background-color: White; display: none; width: 20%;'>";
echo $total = $row['A'] - $row['B'];
echo "</div>";
echo "</td>";
echo "</tr>";           
}
echo "</table>";