[Posting] advanced tooltip in the DataGrid

From: http://blog.csdn.net/yx10/archive/2005/07/18/427766.aspx
Shows the effect:

 

Implementation principle:

For each row in the DataGrid, bind the onmouseover, onmousemove, and onmouseout events. When you move the cursor inside the row, A <div> is automatically displayed, and the cursor is removed from the row, hide this <div>.

Implementation Code:
Front-end:
1. Define the <div> style:
<Style type = "text/CSS">
. Transparent {filter: alpha (opacity = 85 );
Border-top: indianred 1px solid;
Border-Right: indianred 1px solid;
Border-left: indianred 1px solid;
Border-bottom: indianred 1px solid;
Position: absolute;
Background-color: infobackground;
Display: None}
</Style>
2. Show and hide the form script:
<Script language = "JavaScript">
// Display the pop-up form
Function show (country, city, address, postalcode, phone, fax)
{
Document. getelementbyid ("TD1"). innertext = "Country:" + country;
Document. getelementbyid ("td2"). innertext = "City:" + city;
Document. getelementbyid ("td3"). innertext = "Address:" + address;
Document. getelementbyid ("td4"). innertext = "zip code:" + postalcode;
Document. getelementbyid ("td5"). innertext = "Tel:" + phone;
Document. getelementbyid ("td6"). innertext = "Fax:" + fax;
// Obtain the coordinates of the X axis of the mouse
X = event. clientx + document. Body. scrollleft;
// Obtain the coordinates of the Y axis of the mouse
Y = event. clienty + document. Body. scrolltop + 20;
// Display the pop-up form
Popup. style. Display = "Block ";
// Set the coordinates of the X and Y axes of the form.
Popup. style. Left = X;
Popup. style. Top = y;
}
// Hide the pop-up form
Function hide ()
{
// Hide the form
Popup. style. Display = "NONE ";
}
</SCRIPT>
3. tooltip form code
<Div id = "popup" class = "Transparent" style = "Z-INDEX: 200">
<Table border = "0" cellpadding = "0" style = "font-size: X-small">
<Tr>
<TD align = "Middle" bgcolor = "indianred"> <font color = "white"> Contact Information </font> </TD>
</Tr>
<Tr> <TD id = "TD1"> </TD> </tr>
<Tr> <TD id = "td2"> </TD> </tr>
<Tr> <TD id = "td3"> </TD> </tr>
<Tr> <TD id = "td4"> </TD> </tr>
<Tr> <TD id = "td5"> </TD> </tr>
<Tr> <TD id = "td6"> </TD> </tr>
</Table>
</Div>
Background:
Private datatable DT;
Private void page_load (Object sender, system. eventargs E)
{
// Put user code to initialize the page here
If (! Ispostback)
{
Sqlconnection CNN = new sqlconnection ();
CNN. connectionstring = "Data Source = localhost; initial catalog = northwind; Password = ;"
+ "Persist Security info = true; user id = sa; workstation id = apj062; packet size = 4096 ";
String sqlstr = "select Top 16 mermerid, companyName, contacttitle, country, city, address, postalcode, phone, fax from customers ";
CNN. open ();
Sqldataadapter ad = new sqldataadapter (sqlstr, CNN );
Dt = new datatable ();
Ad. Fill (DT );
Grdcustomer. datasource = DT;
Grdcustomer. databind ();
}
}
Private void grdcustomer_itemdatabound (Object sender,
System. Web. UI. webcontrols. datagriditemeventargs E)
{
If (E. Item. itemtype = listitemtype. alternatingitem
| E. Item. itemtype = listitemtype. item)
{
E. Item. Attributes. Add ("onmouseover ",
"This. oldcolor = This. style. backgroundcolor; this. style. backgroundcolor = '# c8f7ff ';");
E. Item. Attributes. Add ("onmousemove ",
"Show ('" + dt. Rows [E. Item. itemindex] ["country"]. tostring () + "','"
+ Dt. Rows [E. Item. itemindex] ["city"]. tostring () + "','"
+ Dt. Rows [E. Item. itemindex] ["Address"]. tostring () + "','"
+ Dt. Rows [E. Item. itemindex] ["postalcode"]. tostring () + "','"
+ Dt. Rows [E. Item. itemindex] ["phone"]. tostring () + "','"
+ Dt. Rows [E. Item. itemindex] ["fax"]. tostring () + "');");
E. Item. Attributes. Add ("onmouseout ",
"This. style. backgroundcolor = This. oldcolor; hide ();");
}
}