Question

<?php

include('db_connect.php');
?><head>
<link rel="stylesheet" type="text/css" href="comment-style.css" media="screen" />


<script type="text/javascript" src="../jquery.tablesorter/jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.tablesorter/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="../jquery-qtip-1.0.0-rc3094652/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../jquery-qtip-1.0.0-rc3094652/jquery.qtip-1.0.0-rc3.min.js"></script>

    <script type="text/javascript">


    $(document).ready(function(){
    var temp= // i need this to fetch the id of which td i hovered, id of the user not id  //of the td so that i can put the id in the data which will be passed to description-//hover.php
    $("#box-table-a span").qtip({
       content: {
          url: 'description-hover.php',
          data: { id: //this should be temp here },
          method: 'post'
       },
       show: 'mouseover',
       hide: 'mouseout'
    });

    });

    </script>
    <html>

    </head>
    <div id="table-of-data-div"> 
            <div id="table-div">
    <table id="box-table-a" class="tablesorter">
<thead>
<tr>

<th scope="col" style="cursor:pointer;">B-House/Dorm Name</th>
<th scope="col" style="cursor:pointer;">Address</th>
<th scope="col" style="cursor:pointer;">Price Range</th>
<th scope="col" style="cursor:pointer;">Date Added</th>
<th scope="col" style="cursor:pointer;">Status</th>

</tr>
</thead>
<tbody>
<?php


$q=mysql_query("select * from property");
    while( $f=mysql_fetch_array($q, MYSQL_ASSOC))
    {
                                            $p_id=$f["p_id"];

    echo"

    <tr>
                                                <td id='tool-table''><input type='hidden' id='tool-id' value='".$p_id."' />

                                                <span style='cursor:pointer'>".$f['p_name']."</span></td>
                                                <td id='pretty'>".$f['address']."</td>
                                                <td>".$f['p_name']."</td>
                                                <td>".$f['payment_type']."</td>      
                                                <td>".$status."</td>       
                                            </tr>       


    ";

    }



    ?>
     </tbody>
    </table>
    </div>
    </div>
    </html>

Answer 1

您可以使用其中一个内置的jQuery工具提示插件。 http://flowplayer.org/tools/tooltip/index.html

以下是将其与表格一起使用的示例：http://flowplayer.org/tools/demos/tooltip/table.html

$(document).ready(function(){
    $("#my-table td").hover(function() {
        $("#property-hover").html("<p>Put some loading text here while the ajax call loads</p>");

        var prop = 0; //TODO: this variable needs to be retrieved from somewhere

        $.ajax({
            type: "POST",
            url: "description-hover.php",
            data: {id:prop},
            success: function(data) {
                $("#property-hover").html(data);
            }
        });  
    });

    $("#my-table td").tooltip({tip: '#property-hover'});
});

Answer 2

我相信您遇到的问题是您正在使用onmouseover方法执行Tooltip允许您作为事件执行的操作。你真的不应该使用onmouseover或onclick。相反，工具提示功能具有在事件显示之前处理事件的选项。

在这种情况下，我会使用onBeforeShow事件通过ajax加载工具提示。

以下是如何使用onBeforeShow的简单示例：

<td class='user_name'>Michael</td>

function load_user_info(event){
  //functionality to ajaxy load info here
}
$('td.user_name').tooltip({
  ...
  onBeforeShow: load_user_info,
  ...
});

我开始在这里创建一个解决方案：http://jsfiddle.net/mimercha/r7Hxf/23/并且没时间了。稍后会尝试完成解决方案。

Answer 3

建议使用以下方法创建工具提示。这样您就可以在工具提示中加入静态或ajax加载的内容 - jQuery qTip

如何在td上修改我的工具提示

3 个答案: