Skip to main content

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

By
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

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:
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:
Sourcecode of How To Show Tooltip On Mouse Hover In Gridview in Using jQuery in ASP.Net C#.Net & VB.Net

You May Also Like...


Labels:

Comments

Post a Comment

Popular posts from this blog

Code To Convert rupees(numbers) into words using C#.Net

By
Introduction: In my previous article I have explained about how to validate emailid using javascript . In this article I am going to explain about code used to convert rupees(numbers) into words using C#.Net . Explanation: For explanation purpose I have a page. It has a textbox to input the numbers. And when you click on the convert to words button then it will convert the input numbers into words and shows it in the below label. Below is the C# code used to do this functionality. public static string NumbersToWords( int inputNumber) {     int inputNo = inputNumber;     if (inputNo == 0)         return "Zero" ;     int [] numbers = new int [4];     int first = 0;     int u, h, t;     System.Text. StringBuilder sb = new System.Text. StringBuilder ();     if (inputNo < 0)     { ...
16 comments
Read More...

C# Extension Methods Example

By
In this article i am going to explain about Extension Methods  with example. Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Extension methods are a special kind of static method, but they are called as if they were instance methods on the extended type. For client code written in C# and Visual Basic, there is no apparent difference between calling an extension method and the methods that are actually defined in a type. If you do implement extension methods for a given type, remember the following points: An extension method will never be called if it has the same signature as a method defined in the type. Extension methods are brought into scope at the namespace level. For example, if you have multiple static classes that contain extension methods in a single namespace named Extensions, they will all be brought into scope by the using Extensions; directive. ...
Post a Comment
Read More...

VBScript equivalent string functions in C#.Net

By
C# Method VBScript Description IndexOf() InStr Returns the position of the first occurrence of one string within another. The search begins at the first character of the string - InStrRev Returns the position of the first occurrence of one string within another. The search begins at the last character of the string ToLower() LCase Converts a specified string to lowercase SubString() Left Returns a specified number of characters from the left side of a string Length() Len Returns the number of characters in a string TrimStart() LTrim Removes spaces on the left side of a string TrimEnd() RTrim Removes spaces on the right side of a string Trim() Trim Removes spaces on both the left and the right side of a string SubString() M...
Post a Comment
Read More...