效果如下图所示:
DataGrid中的高级ToolTip
 

实现原理: 
     DataGrid中的每一行,绑定onmouseoveronmousemoveonmouseout事件,使的鼠标移动到行内时,自动显示一个<div>,鼠标移出该行,就把这个<div>隐藏掉。
实现代码:
     前台:
1.   定义<div>的样式:

DataGrid中的高级ToolTip<style type="text/css">

2.   显示和隐藏窗体的脚本:
DataGrid中的高级ToolTip<script language="JavaScript">
DataGrid中的高级ToolTip     
//显示弹出窗体
DataGrid中的高级ToolTip
     function Show(Country, City, Address, PostalCode, Phone, Fax)

3.   ToolTip窗体的代码
DataGrid中的高级ToolTip<div id="Popup" class="transparent" style=" Z-INDEX: 200">
DataGrid中的高级ToolTip     
<table border="0" cellpadding="0" style="FONT-SIZE: x-small">
DataGrid中的高级ToolTip          
<tr>
DataGrid中的高级ToolTip
<td align="middle" bgcolor="indianred"><font color="white">联系方式</font></td>
DataGrid中的高级ToolTip
</tr>
DataGrid中的高级ToolTip         
<tr><td id="td1"></td></tr>
DataGrid中的高级ToolTip         
<tr><td id="td2"></td></tr>
DataGrid中的高级ToolTip         
<tr><td id="td3"></td></tr>
DataGrid中的高级ToolTip         
<tr><td id="td4"></td></tr>
DataGrid中的高级ToolTip         
<tr><td id="td5"></td></tr>
DataGrid中的高级ToolTip         
<tr><td id="td6"></td></tr>
DataGrid中的高级ToolTip     
</table>
DataGrid中的高级ToolTip
</div>

后台:
DataGrid中的高级ToolTipprivate DataTable dt;
DataGrid中的高级ToolTip
private void Page_Load(object sender, System.EventArgs e)

相关文章: