HTML Markup
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Description",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.");
dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.");
dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.");
dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.ToolTip = (e.Row.DataItem as DataRowView)["Description"].ToString();
}
}
jQuery implementation of ToolTip
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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"></script>
<script type="text/javascript">
$(function () {
$('[id*=GridView1] tr').each(function () {
var toolTip = $(this).attr("title");
$(this).find("td").each(function () {
$(this).simpletip({
content: toolTip
});
});
$(this).removeAttr("title");
});
});
</script>
CSS Styling for ToolTip
<style type="text/css">
.tooltip
{
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: none;
background-color: #FB66AA;
color: White;
padding: 5px;
font-size: 10pt;
font-family: Arial;
}
td
{
cursor: pointer;
}
</style>
OUTPUT
Source :http://www.aspsnippets.com/
