DataGrid实现tooltip功能


1.html
<html>
<head>
    
<title>DataGridTooltip</title>
    
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    
<meta name="CODE_LANGUAGE" content="C#">
    
<meta name="vs_defaultClientScript" content="JavaScript">
    
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    
<style type="text/css"> .transparent {}{ BORDER-RIGHT: indianred 1px solid; BORDER-TOP: indianred 1px solid; DISPLAY: none; FILTER: alpha(opacity=85); BORDER-LEFT: indianred 1px solid; BORDER-BOTTOM: indianred 1px solid; POSITION: absolute; BACKGROUND-COLOR: infobackground } </style>

    
<script language="javascript">
            
function Show(Country, City, Address, PostalCode, Phone, Fax)
            
{
                
//debugger;
                document.getElementById("td1").innerText="国家:"+Country;
                document.getElementById(
"td2").innerText="城市:"+City;
                document.getElementById(
"td3").innerText="地址:"+Address;
                document.getElementById(
"td4").innerText="邮编:"+PostalCode;
                document.getElementById(
"td5").innerText="电话:"+Phone;
                document.getElementById(
"td6").innerText="传真:"+Fax;
                x 
= event.clientX + document.body.scrollLeft;
                y 
= event.clientY + document.body.scrollTop + 20;
                Popup.style.display
="block";
                Popup.style.left 
= x;
                Popup.style.top 
= y;                
            }

            
function Hide()
            
{
                Popup.style.display
="none";
            }

    
</script>

</head>
<body ms_positioning="GridLayout">
    
<form id="Form1" method="post" runat="server">
        
<div id="Popup" class="transparent">
            
<table border="0" cellpadding="0" bgcolor="#00ccff">
                
<tr>
                    
<td align="center" bgcolor="indianred">
                        
<font color="white">联系方式</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>
        
<asp:DataGrid ID="DataGrid1" runat="server">
            
<FooterStyle ForeColor="#003399" BackColor="#99CCCC"></FooterStyle>
            
<SelectedItemStyle Font-Bold="True" ForeColor="#CCFF99" BackColor="#009999"></SelectedItemStyle>
            
<ItemStyle ForeColor="#003399" BackColor="White"></ItemStyle>
            
<HeaderStyle Font-Bold="True" ForeColor="#CCCCFF" BackColor="#003399"></HeaderStyle>
            
<PagerStyle HorizontalAlign="Left" ForeColor="#003399" BackColor="#99CCCC" Mode="NumericPages">
            
</PagerStyle>
        
</asp:DataGrid>
    
</form>
</body>
</html>
2.cs
public class DataGridTooltip : System.Web.UI.Page
    
{
        
protected System.Web.UI.WebControls.DataGrid DataGrid1;
        
private DataTable dt;

        Page_Load
Page_Load

        DataGrid1_ItemDataBound
DataGrid1_ItemDataBound

        Web Form Designer generated code
Web Form Designer generated code
    }
原文地址:https://www.cnblogs.com/puke/p/773145.html