<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
.tooltip
{
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: none;
background-color: #3AC0F2;
color: White;
padding: 5px;
font-family: Arial;
}
td
{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js.txt"></script>
<script type="text/javascript">
$(function () {
$('[id*=GridView1] td').each(function () {
$(this).simpletip({
content: GetTip($(this))
});
});
});
function GetTip(cell) {
var row = cell.parent();
return "Name: " + $("td:nth-child(1)", row).html() + " Age: " + $("td:nth-child(2)", row).html();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Age" HeaderText="Age" />
</Columns>
</asp:GridView>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Age") });
dt.Rows.Add("John", 25);
dt.Rows.Add("Rick", 29);
dt.Rows.Add("Andrew", 11);
dt.Rows.Add("Peter", 14);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Screenshot
