How to modify my tooltip on a td_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-10 09:43 出处：网络

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

相关专题：jquery

<?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开发者_StackOverflow社区, 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>

You can use one of the built in jQuery tooltip plugins. http://flowplayer.org/tools/tooltip/index.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'});
});

I believe the problem you're having is that you're using the onmouseover method to do something that Tooltip allows you to do as an event. You really shouldn't be using onmouseover or onclick. Instead, the tooltip function has options for handling events before it's shown.

In this case, I would use the onBeforeShow event to load the tool tip via ajax.

Here's a simple example of how to use 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,
  ...
});

I started creating a solution here: http://jsfiddle.net/mimercha/r7Hxf/23/ and ran out of time. Will try to finish the solution later.

Recommend using the following for creating the tooltips. This will allow you to include static or ajax loaded content into your tooltips - jQuery qTip