Display (Show) GridView Column Total in ToolTip on MouseHover using jQuery in ASP.Net

Hi akhter,

Check this example. Now please take its reference and correct your code.

HTML

<asp:GridView ID="GridView1" runat="server"></asp:GridView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>
<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;
    }
</style>
<script type="text/javascript">
    $(function () {
        $('[id*=GridView1] tbody tr td').on('mouseover', function () {
            var columnIndex = $(this).index();
            var total = $('[id*=GridView1] tbody tr:last-child td').eq(columnIndex).html();
            if (columnIndex > 0) {
                $(this).simpletip({
                    content: "Total : " + total
                });
            }
        });
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] {
            new System.Data.DataColumn("Name",typeof(string)),
            new System.Data.DataColumn("Quantity",typeof(int)),
            new System.Data.DataColumn("Total",typeof(int))});
        dt.Rows.Add("T-Shirt", 10, 100);
        dt.Rows.Add("Tie", 15, 150);
        dt.Rows.Add("Track Suits", 6, 60);
        dt.Rows.Add("Tweet Coats", 8, 80);
        dt.Rows.Add("Total", 39, 390);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As Data.DataTable = New Data.DataTable()
        dt.Columns.AddRange(New Data.DataColumn() {
                            New Data.DataColumn("Name", GetType(String)),
                            New Data.DataColumn("Quantity", GetType(Integer)),
                            New Data.DataColumn("Total", GetType(Integer))})
        dt.Rows.Add("T-Shirt", 10, 100)
        dt.Rows.Add("Tie", 15, 150)
        dt.Rows.Add("Track Suits", 6, 60)
        dt.Rows.Add("Tweet Coats", 8, 80)
        dt.Rows.Add("Total", 39, 390)
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Screenshot