In this article I will explain with an example, how to display GridView Row details on cell mouse hover using jQuery UI ToolTip plugin in ASP.Net.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView with two BoundField columns.
The GridView has been assigned with OnRowDataBound event handler.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
    </Columns>
</asp:GridView>
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding GridView
Inside the Page Load event handler, the GridView is populated with dummy records.
Note: For more details, please refer my article Dynamically create DataTable and bind to GridView in ASP.Net.
 
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();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
                            New DataColumn("Id", GetType(Integer)),
                            New DataColumn("Name", GetType(String)),
                            New DataColumn("Description", GetType(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()
    End If
End Sub
 
 
Binding ToolTip contents to the GridView Row
Inside the OnRowDataBound event handler, the Description column is set as ToolTip for the GridViewRow.
This ToolTip will be displayed, when the mouse if moved over the GridViewRow.
C#
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.ToolTip = (e.Row.DataItem as DataRowView)["Description"].ToString();
    }
}
 
VB.Net
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.ToolTip = TryCast(e.Row.DataItem, DataRowView)("Description").ToString()
    End If
End Sub
 
 
Implementing jQuery UI ToolTip
Inside the HTML, following jQuery UI Tooltip CSS file is inherited.
1. jquery-ui.css
 
Then following jQuery and jQuery UI Tooltip JS Script files are inherited.
1. jquery.min.js
2. jquery-ui.js
Inside the jQuery document ready event handler, the jQuery UI Tooltip plugin is applied to all the Rows except the first Row i.e. the Header Row.
Thus, when mouse is moved over cell the title will be displayed in ToolTip.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=GridView1] tr').not("tr:first-child").tooltip();
    });
</script>
 
 
Screenshot
Display GridView Row details on Cell MouseOver using jQuery ToolTip Plugin in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code