In this article I am going to show how we can show a record
as tool tip on mouse hover in a Grid View in asp.net using jQuery.
below is the working of my program.
Records are displaying in
a Grid View on Mouse Hover as Tool Tip...
Image 1.
Image 2.
aspx code for this
is:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show
Information in Tool Page in ASP.NET GridView Using jQuery</title>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script src="jquery.tooltip.min.js" type="text/javascript"></script>
<script type="text/javascript">
function
ToolTipSHOW() {
$(".OnShowToolTip").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function
() {
return
$($(this).next().html());
},
showURL: false
});
}
</script>
<script type="text/javascript">
$(function
() {
ToolTipSHOW();
})
</script>
<style type="text/css">
#tooltip
{
position:
absolute;
z-index:
3000;
border:
1px solid #111;
background-color:
#CEE3F6;
padding:
5px;
opacity:
0.85;
}
#tooltip
h3, #tooltip
div
{
margin:
0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="20" cellspacing="20" width="50%" align="center" border="2">
<tr>
<td align="center">
<asp:GridView runat="server" ID="GridEmployee" AutoGenerateColumns="False" HeaderStyle-BackColor="#7779AF"
HeaderStyle-ForeColor="White"
CellPadding="4"
ForeColor="#333333"
GridLines="None">
<RowStyle BackColor="#F7F6F3"
ForeColor="#333333"
/>
<Columns>
<asp:BoundField DataField="EmployeeNo"
HeaderText="EmployeeNo"
/>
<asp:TemplateField HeaderText="Name">
<ItemStyle Width="30px"
HorizontalAlign="Center"
/>
<ItemTemplate>
<a href="#" class="OnShowToolTip">
<%# Eval("Name")%></a>
<div id="tooltip"
style="display: none;">
<table>
<tr>
<td
style="white-space: nowrap;">
<b>Emp Name:</b>
</td>
<td>
<%# Eval("Name")%>
</td>
</tr>
<tr>
<td
style="white-space: nowrap;">
<b>ID:</b>
</td>
<td>
<%# Eval("EmployeeNo")%>
</td>
</tr>
<tr>
<td style="white-space: nowrap;">
<b>Emp Code:</b>
</td>
<td>
<%# Eval("EmployeeCode")%>
</td>
</tr>
<tr>
<td
style="white-space: nowrap;">
<b>Keywords:</b>
</td>
<td>
<%# Eval("Keywords")%>
</td>
</tr>
<tr>
<td
style="white-space: nowrap;">
<b>Mobile:</b>
</td>
<td>
<%# Eval("Mobile")%>
</td>
</tr>
<tr>
<td
style="white-space: nowrap;">
<b>Country:</b>
</td>
<td>
<%# Eval("Country")%>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmployeeCode"
HeaderText="EmployeeCode"
/>
<asp:BoundField DataField="Keywords"
HeaderText="Keywords"
/>
<asp:BoundField DataField="Mobile"
HeaderText="Mobile"
/>
<asp:BoundField DataField="Country"
HeaderText="Country"
/>
</Columns>
<FooterStyle BackColor="#5D7B9D"
Font-Bold="True"
ForeColor="White"
/>
<PagerStyle BackColor="#284775"
ForeColor="White"
HorizontalAlign="Center"
/>
<SelectedRowStyle BackColor="#E2DED6"
Font-Bold="True"
ForeColor="#333333"
/>
<HeaderStyle BackColor="#5D7B9D"
ForeColor="White"
Font-Bold="True"></HeaderStyle>
<EditRowStyle BackColor="#999999"
/>
<AlternatingRowStyle BackColor="White"
ForeColor="#284775"
/>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
aspx.cs code is:
using System;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
using
System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlDataAdapter
da;
DataSet
ds = new DataSet();
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
BindData();
}
}
private void BindData()
{
SqlConnection
con = new SqlConnection(@"Server=.;Database=Test;Integrated
Security=true;");
SqlCommand
cmd = new SqlCommand("SELECT *
FROM Employee", con);
try
{
da = new
SqlDataAdapter(cmd);
da.Fill(ds);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
if
(!object.Equals(ds.Tables[0], null))
{
if
(ds.Tables[0].Rows.Count > 0)
{
GridEmployee.DataSource =
ds.Tables[0];
GridEmployee.DataBind();
}
else
{
GridEmployee.DataSource = null;
GridEmployee.DataBind();
}
}
else
{
GridEmployee.DataSource = null;
GridEmployee.DataBind();
}
}
catch (Exception ex)
{
}
}
}