很少玩和CSS
设置tooltip
会解决这个问题
代码背后:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{ for(int i =0;i <GridView1.Rows.Count;i++)
{
Label lblName = (Label)GridView1.Rows[i].Cells[1].FindControl("lblname");
lblName.ToolTip = "This is my toolTip";// You can set tooltip as Fullname
}
}
默认.aspx:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="gridMyClass"
Width="125px" onrowdatabound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblname" CssClass="myTxtClass" runat="server" Text='<%#Eval("name")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
CSS:
.myTxtClass{
display:inline;
position: relative;
text-decoration:none;
cursor:pointer;
}
.myTxtClass:hover:before{
border: solid;
border-color: red transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
.myTxtClass:hover:after{
background-color: red;
opacity:0.7;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
截屏: