Display (Show) GridView Row Details in ToolTip on MouseHover using jQuery in ASP.Net

Binding GridView and ToolTip contents to the GridView Row

The GridView is populated with dummy records, you will notice that the DataTable has three columns while the GridView has only two BoundField columns.

The third column i.e. Description is set as ToolTip for the GridViewRow inside the OnRowDataBound event handler. This ToolTip will be displayed when the mouse if moved over the GridViewRow.

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();
    }
}

On Client Side, I am executing a jQuery loop over the GridView Row i.e. HTML TR and for each GridViewRow jQuery SimpleTip ToolTip plugin is applied. Thus when mouse is moved over GridView Cell the ToolTip will be displayed with the GridView Row details.

<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>