Display ToolTip with data from database on GridView Row MouseOver using jQuery AJAX in ASP.Net

Please refer this code and try to run it in a new website.

I have used the Repeater control to bind the Leaves records.

You can also bind the Repeater with your Sql Table. Just remember to set correct column names.

Database

CREATE TABLE EmployeeLeaves(
EmployeeId INT IDENTITY(1,1) NOT NULL,
Name VARCHAR(50) NOT NULL,
Country VARCHAR(50) NOT NULL)
GO

CREATE TABLE LeaveType(
LeaveId INT IDENTITY(1,1) NOT NULL,
LeaveType VARCHAR(50) NOT NULL,
LeaveCount INT,
EmployeeId INT)
GO

INSERT INTO [Sample].[dbo].EmployeeLeaves
           ([Name]
           ,[Country])
     VALUES
           ('John Hammond'
           ,'United States')
GO

INSERT INTO [Sample].[dbo].EmployeeLeaves
           ([Name]
           ,[Country])
     VALUES
           ('Mudassar Khan'
           ,'India')
           
GO

INSERT INTO EmployeeLeaves
           ([Name]
           ,[Country])
     VALUES
           ('Suzanne Mathews'
           ,'France')
GO

INSERT INTO [LeaveType]
           ([LeaveType]
           ,[LeaveCount]
           ,[EmployeeId])
     VALUES
           ('Sick'
           ,2
           ,1)
GO

INSERT INTO [LeaveType]
           ([LeaveType]
           ,[LeaveCount]
           ,[EmployeeId])
     VALUES
           ('Sick'
           ,5
           ,2)
GO

INSERT INTO [LeaveType]
           ([LeaveType]
           ,[LeaveCount]
           ,[EmployeeId])
     VALUES
           ('Vacation'
           ,10
           ,3)
GO

INSERT INTO [LeaveType]
           ([LeaveType]
           ,[LeaveCount]
           ,[EmployeeId])
     VALUES
           ('Vacation'
           ,5
           ,1)
GO

HTML

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="OnRowDataBound">
        <Columns>
            <asp:TemplateField HeaderText="Employee ID">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkEmployeeId" Text='<%# Eval("EmployeeId")%>' CssClass="gridViewToolTip"
                        runat="server" />
                    <asp:Repeater ID="rptLeaves" runat="server">
                        <HeaderTemplate>
                            <div id="tooltip" style="display: none;">
                                <table>
                                    <tr>
                                        <th align="center">
                                            <b>Leave Type</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        </th>
                                        <th align="center">
                                            <b>Total</b>
                                        </th>
                                    </tr>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr>
                                <td>
                                    <%# Eval("LeaveType")%>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </td>
                                <td>
                                    <%# Eval("LeaveCount")%>
                                </td>
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                            </table> </div>
                        </FooterTemplate>
                    </asp:Repeater>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
        </Columns>
    </asp:GridView>

Namespaces

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

 C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.PopulateEmployees();
    }
}

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        Repeater rptLeaves = e.Row.FindControl("rptLeaves") as Repeater;
        int employeeId = Convert.ToInt32((e.Row.FindControl("lnkEmployeeId") as LinkButton).Text);
        rptLeaves.DataSource = this.PopulateLeaves(employeeId);
        rptLeaves.DataBind();

    }
}

private DataTable PopulateLeaves(int employeeId)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT LeaveType, LeaveCount  FROM [LeaveType] WHERE EmployeeId = @EmployeeId ", con))
        {
            cmd.Parameters.AddWithValue("@EmployeeId", employeeId);
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                return dt;
            }
        }
    }
}

private void PopulateEmployees()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT * FROM EmployeeLeaves", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dtEmployees = new DataTable();
                sda.Fill(dtEmployees);
                GridView1.DataSource = dtEmployees;
                GridView1.DataBind();
            }
        }
    }
}

JavaScript

<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.tooltip.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function InitializeToolTip() {
        $(".gridViewToolTip").tooltip({
            track: true,
            delay: 0,
            showURL: false,
            fade: 100,
            bodyHandler: function () {
                return $($(this).next().html());
            },
            showURL: false
        });
    }
</script>
<script type="text/javascript">
    $(function () {
        InitializeToolTip();
    })
</script>

Style

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    table
    {
        border: 1px solid #ccc;
    }
        
    table th, table td
    {
        padding: 5px;
        border-color: #ccc;
    }
    #tooltip
    {
        position: absolute;
        z-index: 3000;
        border: 1px solid #111;
        background-color: #C90000;
        color: White;
        padding: 5px;
        opacity: 0.85;
    }
    #tooltip h3, #tooltip div
    {
        margin: 0;
    }
</style>

Screenshot