Show Gridview row detail in Tooltip on mousehover using Jquery in - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

Show Gridview row detail in Tooltip on mousehover using Jquery in

Introduction: In this article today I will explain how we can show Gridview row detail in Tooltip on mousehover using Jquery in
Tooltip on mousehover
Click here to Enlarge

To implement the tooltip on mousehover we need to following steps:

      1.       Download the tooltip jquery. To download ClickHere.

2  2.      Create a Store procedure to get data in Sql:

  Create proc [dbo].[getemp]
  select top 5 * from dbo.employee

3  3.       Add a webform to project and design the .aspx page as show below:

Add the script and style in head of page :

<script src="" type="text/javascript"></script>
    <script src="Scripts/jquery.tooltip.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function InitializeToolTip() {
                track: true,
                delay: 0,
                showURL: false,
                fade: 100,
                bodyHandler: function () {
                    return $($(this).next().html());
                showURL: false
    <script type="text/javascript">
        $(function () {
<style type="text/css">
    a {text-decoration: none;}
    a : hover {color: #fffff;}
        #tooltip    {
            position: absolute;
            z-index: 3000;
            border: 1px solid #111;
            background-color: #CCCCCC;
            padding: 5px;
            opacity: 0.95;    }
        #tooltip h3, #tooltip div
        {  margin: 0;  }

And design the Gridview:

<asp:GridView ID="grdemp" runat="server" DataKeyNames="Id" AutoGenerateColumns="false">
    <AlternatingRowStyle BackColor="Aquamarine" />
    <HeaderStyle BackColor="#047182" Font-Bold="true" ForeColor="White" Width="600px" />   
    <asp:TemplateField HeaderText="UserId">
<ItemStyle Width="100px" HorizontalAlign="Center" />
<a href="#" class="grdemptooltip">View Detail</a>
<div id="tooltip" style="display: none;">
<td style="white-space: nowrap;"><b>Name:</b>&nbsp;</td>
<td><%# Eval("Emp_Name")%></td>
<td style="white-space: nowrap;"><b>Salary:</b>&nbsp;</td>
<td><%# Eval("emp_salary")%></td>
<td style="white-space: nowrap;"><b>Address:</b>&nbsp;</td>
<td><%# Eval("emp_Adress")%></td>
    <asp:BoundField DataField="Emp_Name" HeaderText="Name" />
<asp:BoundField DataField="emp_salary" HeaderText="Salary" />
    <asp:BoundField DataField="emp_Adress" HeaderText="Address" />

Write the code in .aspx.cs file:

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

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
        protected void Page_Load(object sender, EventArgs e)
        public void Bindemp()
            SqlCommand cmd = new SqlCommand("getemp", con);
            SqlDataAdapter adp = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            grdemp.DataSource = dt;
In VB:

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
        End If
    End Sub
    Public Sub Bindemp()
        Dim cmd As New SqlCommand("getemp", con)
        Dim adp As New SqlDataAdapter(cmd)
        Dim dt As New DataTable()
        grdemp.DataSource = dt
    End Sub

Build, run the project and check the result.

Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email. 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.


jquery.tooltip.min.js where is this file ?????????

there is a link to download the jquery in first step.

Here no need to create CSS class .grdemptooltip....

not Working if we put grid view in behalf of table

not working ,gettting error on jquery.tooltip.min.js