如何在TD上修改我的工具提示 [英] How to modify my tooltip on a td
本文介绍了如何在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屋!
查看全文