How To Show Tooltip On Mouse Hover In Gridview in Using jQuery in ASP.Net C#.Net & VB.Net

In this tutorial i am going to explain about how to show tooltip On Mouse hover in gridview in ASP.Net,C#.Net & VB.Net using jQuery.


In my previous article i have explained about SQL Script To Drop Multiple Tables,Procedures At Once ,Convert Dataset Datatable To Json Data Array,SQL Script To Drop Multiple Tables,Procedures At Once In Sql Server,Highlight,Change Color Of Row On Mouseover In Grid View Using CSS - C#.Net ASP.Net VB.Net,Programmatically Group Gridview Column Headers,How To Convert JSON Data Into Html Table Using Javascript JQuery,Upload Multiple Files In Asp.Net C#.Net VB.Net / Maximum Request Length Exceeded and many articles in C#.Net,ASP.Net,VB.Net,Grid View,Javascript,jQuery,SQL Server and many other topics.

I have created a new website and added a webform called default.aspx to the website. Inside the webform i have included a gridview to show the employee details. And to show the tooltip on gridview i have downloaded tooltip js from the below url.

ToolTip js:

https://code.google.com/p/ido-yql-demo/downloads/detail?name=jquery.tooltip.min.js

Once you downloaded the js then include the js in the html like below.

jQuery & ToolTip Js:

The entire html markup of the page is given below.

HTML Markup:

Show Tooltip On ASP.Net GridView Using jQuery - .Net Pickles









    
    
            Details
        
    



                


                    
EmployeeId: 
                    
<%# Eval("EmpId")%>
                

                    
EmployeeName: 
                    
<%# Eval("Name")%>
                

                    
Qualification: 
                    
<%# Eval("Qualification")%> 
                

                    
Location: 
                    
<%# Eval("Location")%>
                

                    
Branch: 
                    
<%# Eval("Branch")%> 
                

                    
Designation: 
                    
<%# Eval("Designation")%> 
                

                    
Department: 
                    
<%# Eval("Department")%> 
                

                    
Salary: 
                    
<%# Eval("Salary")%> 
                

Now in the code behind file i am creating a datatable and inserting some sample records in the datatable and then binding it to the gridview. The entire code is given below.

C#.Net:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        BindEmployeeDetailsToGridView();
}
private void BindEmployeeDetailsToGridView()
{
    DataTable dt = new DataTable();
    // Columns to store employee details
    dt.Columns.Add("EmpId", typeof(int));
    dt.Columns.Add("Name", typeof(string));
    dt.Columns.Add("Qualification", typeof(string));
    dt.Columns.Add("Location", typeof(string));
    dt.Columns.Add("Branch", typeof(string));
    dt.Columns.Add("Designation", typeof(string));
    dt.Columns.Add("Department", typeof(string));
    dt.Columns.Add("Salary", typeof(string));

    // sample rows - Adding
    dt.Rows.Add(1, "Thiru", "MCA", "Delhi", "First Floor", "Tech Support Engineer", "ITES", "INR 33500/Month");
    dt.Rows.Add(1, "Praba", "BBA", "Chennai", "Suzon Tower", "Store MAnager", "Housekeeping", "INR 33550/Month");
    dt.Rows.Add(1, "Muruga", "BCA", "Bangalore", "IT Part", "Designing Manager", "UX", "INR 41500/Month");
    dt.Rows.Add(1, "Purushoth", "BTech", "Delhi", "IT Park 2", "IT Manager", "IT", "INR 44500/Month");
    dt.Rows.Add(1, "Kanna", "BE", "Chennai", "First Tower", "Developer", "Software", "INR 102000/Month");
    dt.Rows.Add(1, "Sudhakar", "ME", "Bangalore", "Branch JP", "Helpdesk Engineer", "Helpdesk", "INR 38230/Month");

    //datatable to grid view - Binding
    GridEmployeeDetails.DataSource = dt;
    GridEmployeeDetails.DataBind();
}
}

VB.Net:

Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Data

Public Partial Class _Default
 Inherits System.Web.UI.Page
 Protected Sub Page_Load(sender As Object, e As EventArgs)
  If Not IsPostBack Then
   BindEmployeeDetailsToGridView()
  End If
 End Sub
 Private Sub BindEmployeeDetailsToGridView()
  Dim dt As New DataTable()
  ' Columns to store employee details
  dt.Columns.Add("EmpId", GetType(Integer))
  dt.Columns.Add("Name", GetType(String))
  dt.Columns.Add("Qualification", GetType(String))
  dt.Columns.Add("Location", GetType(String))
  dt.Columns.Add("Branch", GetType(String))
  dt.Columns.Add("Designation", GetType(String))
  dt.Columns.Add("Department", GetType(String))
  dt.Columns.Add("Salary", GetType(String))

  ' sample rows - Adding
  dt.Rows.Add(1, "Thiru", "MCA", "Delhi", "First Floor", "Tech Support Engineer", _
   "ITES", "INR 33500/Month")
  dt.Rows.Add(1, "Praba", "BBA", "Chennai", "Suzon Tower", "Store MAnager", _
   "Housekeeping", "INR 33550/Month")
  dt.Rows.Add(1, "Muruga", "BCA", "Bangalore", "IT Part", "Designing Manager", _
   "UX", "INR 41500/Month")
  dt.Rows.Add(1, "Purushoth", "BTech", "Delhi", "IT Park 2", "IT Manager", _
   "IT", "INR 44500/Month")
  dt.Rows.Add(1, "Kanna", "BE", "Chennai", "First Tower", "Developer", _
   "Software", "INR 102000/Month")
  dt.Rows.Add(1, "Sudhakar", "ME", "Bangalore", "Branch JP", "Helpdesk Engineer", _
   "Helpdesk", "INR 38230/Month")

  'datatable to grid view - Binding
  GridEmployeeDetails.DataSource = dt
  GridEmployeeDetails.DataBind()
 End Sub
End Class

Now while moving the mouse over the details tab the row details have been shown in the tooltip like below.

Output of how to show tooltip On Mouse hover in gridview in c#.Net,vb.Net using jQuery:

Download the source code of how to show tooltip On Mouse hover in gridview in c#.Net,vb.Net using jQuery:

You May Also Like...

• Fill Datatable and Bind GridView Using Data Reader in ASP.Net C#.Net VB.Net
• how to get the selected values from checkboxlist in C#.Net and VB.Net
• Asp.Net - How to read word file in C#.Net ,VB.Net
• ASP.Net - How to Pass +(plus) in query string in C#.Net,VB.Net
• How To Show Tooltip On Mouse Hover In Gridview in Using jQuery in ASP.Net C#.Net & VB.Net
• Convert Dataset Datatable To Json Data Array in Asp.Net C#.Net & VB.Net or How To Use JavaScriptSerializer to Convert Datatable to Json Data Array
• Highlight,change color of row on mouseover in grid view using CSS - C#.Net ASP.Net VB.Net
• C#.Net - Programmatically Group Gridview Column Headers in ASP.Net,VB.Net
• Upload multiple files in asp.net C#.Net VB.Net / Maximum Request Length Exceeded
• Change Row Color of a Grid view Based on Particular Condition C#.Net ASP.Net VB.Net