Show GridView Row Details in Tooltip on Mouseover Using JQuery in ASP.NET

In this post we will learn How To Show GridView Row Details in Tooltip on Mouseover Using JQuery in ASP.NET. Earlier we had discussed about Gridview Edit Delete Update, How to Filter GridView Records with Dropdownlist Selection, How to Redirect to Another Page by Click on LinkButton in GridView, How to Display Images in GridView Control In Asp.Net, Nested GridView Example In Asp.Net – Gridview Inside Gridview, Delete Multiple Rows In GridView In Asp.Net Using Checkbox.Here we are using jQuery to fulfill our requirement.We have to download this jQuery plugin from here http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/.

Design:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show GridView Row Details in Tooltip on Mouseover Using JQuery in ASP.NET</title>

<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.tooltip.min.js"></script>

<script type="text/javascript">
function InitializeToolTip() {
$(".gridViewToolTip").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">

body
 {
 width: 980px;
 margin: 0px auto;
 text-align: center;
 padding-top: 50px;
 font-size: 20px;
 }
#tooltip
{
position: absolute;
z-index: 5000;
border: 1px solid #111;
background-color: #cccccc;
padding: 10px;
opacity: 0.95;    }

</style>
</head>
<body>
<form id="form1" runat="server">
<h2>Show GridView Row Details in Tooltip on Mouseover Using JQuery in ASP.NET</h2>
<div>
<asp:GridView ID="gv" runat="server" Width="100%" AutoGenerateColumns="false">
<Columns>

<asp:TemplateField HeaderText="Action">
<ItemTemplate><a href="#" class="gridViewToolTip" style="text-decoration: none">Show Details</a>

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

  <tr> <td style="white-space: nowrap;">UID:&nbsp;</td>
  <td><%# Eval("uid")%></td></tr>
  <tr><td style="white-space: nowrap;">Username:&nbsp;</td>
  <td><%# Eval("Username")%></td></tr>
  <tr><td style="white-space: nowrap;">User Email:&nbsp;</td>
  <td> <%# Eval("uemail")%> </td> </tr>

 </table>
</div>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="UID">
<ItemTemplate><asp:Label ID="uidn" runat="server" Text='<%#Eval("uid") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="UserName">
<ItemTemplate><asp:Label ID="uname" runat="server" Text='<%#Eval("username") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>

<%--<asp:TemplateField HeaderText="User Email">
<ItemTemplate><asp:Label ID="uemail" runat="server" Text='<%#Eval("uemail") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>--%>

</Columns>
</asp:GridView>    



<br /><br />

All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a> | Hosting partner <a href="http://www.grootstech.com" target="_blank">Grootstech</a>
</div>
</form>
</body>
</html>

Code:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{
    String strcon=ConfigurationManager.ConnectionStrings["connnn"].ConnectionString;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            binddata();
        }
    }
    public void binddata()
    {
        SqlConnection con = new SqlConnection(strcon);
        try
        {
            con.Open();
        }
        catch { }
        string str = "select top(5) * from users";
        SqlCommand cmd = new SqlCommand(str, con);
        SqlDataReader reader;
        reader = cmd.ExecuteReader();
        gv.DataSource = reader;
        gv.DataBind();
        con.Close();
    }
}