Show Gridview row detail in Tooltip on mousehover using Jquery in asp.net

Introduction: In this article today I will explain how we can show Gridview row detail in Tooltip on mousehover using Jquery in asp.net.

Click here to Enlarge

Description:

In the previous article I have explained Fill dropdownlist with days, month and year in asp.net,Server side validation in MVC Razor using data annotation,Like linq query example and bind gridview,Create a dynamic Slider in asp.net, URL routing in asp.net website and Display message and header when Gridview is empty in asp.net.

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]

  AS

BEGIN

  select top 5 * from dbo.employee

  end

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="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() {

            $(".grdemptooltip").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 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;  }

    </style>

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" />   

    <Columns>

    <asp:TemplateField HeaderText="UserId">

<ItemStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<a href="#" class="grdemptooltip">View Detail</a>

<div id="tooltip" style="display: none;">

<table>

<tr>

<td style="white-space: nowrap;"><b>Name:</b>&nbsp;</td>

<td><%# Eval("Emp_Name")%></td>

</tr>

<tr>

<td style="white-space: nowrap;"><b>Salary:</b>&nbsp;</td>

<td><%# Eval("emp_salary")%></td>

</tr>

<tr>

<td style="white-space: nowrap;"><b>Address:</b>&nbsp;</td>

<td><%# Eval("emp_Adress")%></td>

</tr>

</table>

</div>

</ItemTemplate>

</asp:TemplateField>

    <asp:BoundField DataField="Emp_Name" HeaderText="Name" />

<asp:BoundField DataField="emp_salary" HeaderText="Salary" />

    <asp:BoundField DataField="emp_Adress" HeaderText="Address" />

    </Columns>

    </asp:GridView>

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)

        {

            if(!IsPostBack)

            {

                Bindemp();              

            }

        }

        public void Bindemp()

        {

            SqlCommand cmd = new SqlCommand("getemp", con);

            con.Open();

            SqlDataAdapter adp = new SqlDataAdapter(cmd);

            DataTable dt = new DataTable();

            adp.Fill(dt);

            grdemp.DataSource = dt;

            grdemp.DataBind();

            con.Close();

        }

  

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

            Bindemp()

        End If

    End Sub

    Public Sub Bindemp()

        Dim cmd As New SqlCommand("getemp", con)

        con.Open()

        Dim adp As New SqlDataAdapter(cmd)

        Dim dt As New DataTable()

        adp.Fill(dt)

        grdemp.DataSource = dt

        grdemp.DataBind()

        con.Close()

    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.