如何在TD上修改我的工具提示 [英] How to modify my tooltip on a td

查看:86
本文介绍了如何在TD上修改我的工具提示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

推荐答案

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

You can use one of the built in jQuery tooltip plugins. http://flowplayer.org/tools/tooltip/index.html

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

Here's an example of using it with a table: 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'});
});

这篇关于如何在TD上修改我的工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆