DataGrid中的高级ToolTip

  1<div> ，鼠标移出该行，就把这个  <div> 隐藏掉。 
  2
  3实现代码： 
  4
  5前台： 
  6
  71．  定义  <div> 的样式： 
  8
  9<style type="text/css">
 10
 11.transparent { FILTER: alpha(opacity=85); 
 12
 13BORDER-TOP: indianred 1px solid; 
 14
 15BORDER-RIGHT: indianred 1px solid; 
 16
 17BORDER-LEFT: indianred 1px solid; 
 18
 19BORDER-BOTTOM: indianred 1px solid; 
 20
 21POSITION: absolute; 
 22
 23BACKGROUND-COLOR: infobackground; 
 24
 25DISPLAY: none  } 
 26
 27</style>
 28
 292．  显示和隐藏窗体的脚本： 
 30
 31<script language="javascript">
 32
 33//  显示弹出窗体 
 34
 35function Show(Country, City, Address, PostalCode, Phone, Fax) 
 36
 37{ 
 38
 39document.getElementById("td1").innerText="  国家：  "+Country; 
 40
 41document.getElementById("td2").innerText="  城市：  "+City; 
 42
 43document.getElementById("td3").innerText="  地址：  "+Address; 
 44
 45document.getElementById("td4").innerText="  邮政编码：  "+PostalCode; 
 46
 47document.getElementById("td5").innerText="  电话：  "+Phone; 
 48
 49document.getElementById("td6").innerText="  传真：  "+Fax; 
 50
 51//  获得鼠标的  X  轴的坐标 
 52
 53x = event.clientX + document.body.scrollLeft; 
 54
 55//  获得鼠标的  Y  轴的坐标 
 56
 57y = event.clientY + document.body.scrollTop + 20; 
 58
 59//  显示弹出窗体 
 60
 61Popup.style.display="block"; 
 62
 63//  设置窗体的  X,Y  轴的坐标 
 64
 65Popup.style.left = x; 
 66
 67Popup.style.top = y; 
 68
 69} 
 70
 71//  隐藏弹出窗体 
 72
 73function Hide() 
 74
 75{ 
 76
 77//  隐藏窗体 
 78
 79Popup.style.display="none"; 
 80
 81} 
 82
 83</script>
 84
 853．  ToolTip  窗体的代码 
 86
 87<div class="transparent" id="Popup" style=" Z-INDEX: 200">
 88<table border="0" cellpadding="0" style="FONT-SIZE: x-small">
 89<tr>
 90<td align="middle" bgcolor="indianred"><font color="white"> 联系方式  </font></td>
 91</tr>
 92<tr><td id="td1"></td></tr>
 93<tr><td id="td2"></td></tr>
 94<tr><td id="td3"></td></tr>
 95<tr><td id="td4"></td></tr>
 96<tr><td id="td5"></td></tr>
 97<tr><td id="td6"></td></tr>
 98</table>
 99</div>
100
101后台： 
102
103private DataTable dt; 
104
105private void Page_Load(object sender, System.EventArgs e) 
106
107{ 
108
109// Put user code to initialize the page here 
110
111if(!IsPostBack) 
112
113{ 
114
115SqlConnection cnn = new SqlConnection(); 
116
117cnn.ConnectionString = "data source=localhost;initial catalog=Northwind;password=;" 
118
119+"persist security info=True;user id=sa;workstation id=APJ062;packet size=4096"; 
120
121string sqlstr = "select Top 16 CustomerID, CompanyName, ContactTitle,Country, City, Address,PostalCode,Phone,Fax from Customers"; 
122
123cnn.Open(); 
124
125SqlDataAdapter ad = new SqlDataAdapter(sqlstr,cnn); 
126
127dt = new DataTable(); 
128
129ad.Fill(dt); 
130
131grdCustomer.DataSource = dt; 
132
133grdCustomer.DataBind(); 
134
135} 
136
137} 
138
139private void grdCustomer_ItemDataBound(object sender, 
140
141System.Web.UI.WebControls.DataGridItemEventArgs e) 
142
143{ 
144
145if(e.Item.ItemType == ListItemType.AlternatingItem 
146
147|| e.Item.ItemType == ListItemType.Item) 
148
149{ 
150
151e.Item.Attributes.Add("onmouseover", 
152
153"this.oldcolor=this.style.backgroundColor;this.style.backgroundColor='#C8F7FF';"); 
154
155e.Item.Attributes.Add("onmousemove", 
156
157"Show('"+dt.Rows[e.Item.ItemIndex]["country"].ToString()+"','" 
158
159+dt.Rows[e.Item.ItemIndex]["City"].ToString()+"','" 
160
161+dt.Rows[e.Item.ItemIndex]["Address"].ToString()+"','" 
162
163+dt.Rows[e.Item.ItemIndex]["PostalCode"].ToString()+"','" 
164
165+dt.Rows[e.Item.ItemIndex]["Phone"].ToString()+"','" 
166
167+dt.Rows[e.Item.ItemIndex]["Fax"].ToString()+"');"); 
168
169e.Item.Attributes.Add("onmouseout", 
170
171"this.style.backgroundColor=this.oldcolor;Hide();"); 
172
173} 
174
175}</div></div></div>