In this
article I’m going to explain how to show GridView row details in Tooltip on
mouseover using JQuery in ASP.NET.
About
JQuery Tooltip plugin:
The jQuery Tooltip plugin let’s you transform native
tooltip’s into customizable overlays. You can adjust their content, position
and appearance. Tooltips can
be attached to any element. When you hover the element with your mouse, the
title attribute is displayed in a little box next to the element, just like a
native tooltip.
But as it's not a native tooltip, it can be
styled. Any themes built with ThemeRoller (JQuery UI Theme builder
application) will also style
tooltips accordingly.
Tooltips are also useful for form elements,
to show some additional information in the context of each field.
You
can download JQuery Tooltip plugin by follow the link given below or you can download source code attached along with this article.
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
In this article I’ll demonstrate
you how to show GridView row details in Tooltip on mouseover. It’s very easy to
implement this JQuery tooltip functionality in ASP.NET GridView. I have used
XML file to bind GridView for convenience purpose.
Designer
source code:
<%@ 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>gridview
header</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="jquery.tooltip.min.js" type="text/javascript"></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">
#tooltip {
position:
absolute;
z-index:
3000;
border:
1px solid #111;
background-color:
#C2E0FF;
padding:
5px;
opacity:
0.85; }
#tooltip
h3, #tooltip
div
{ margin:
0; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false"
Width="660px" Height="214px">
<HeaderStyle BackColor="#3E3E3E" Font-Names="Calibri" ForeColor="White" />
<RowStyle Font-Names="Calibri" />
<Columns>
<asp:TemplateField >
<ItemStyle Width="30px" HorizontalAlign="Center" />
<ItemTemplate>
<a href="#" class="gridViewToolTip" style="text-decoration: none">Details
</a>
<div id="tooltip" style="display: none;">
<table>
<tr> <td style="white-space:
nowrap;"><b>Name:</b> </td>
<td><%# Eval("name")%></td></tr>
<tr><td style="white-space:
nowrap;"><b>City:</b> </td>
<td><%# Eval("city")%></td></tr>
<tr><td style="white-space:
nowrap;"><b>Country:</b> </td>
<td> <%# Eval("country")%> </td> </tr>
<tr><td style="white-space:
nowrap;"><b>Designation:</b> </td>
<td><%# Eval("designation")%></td></tr>
<tr> <td style="white-space:
nowrap;"> <b>Joining date:</b> </td>
<td> <%# Eval("joiningdate")%> </td> </tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="name" HeaderText="Name" />
<asp:BoundField DataField="city" HeaderText="City" />
<asp:BoundField DataField="country" HeaderText="Country" />
<asp:BoundField DataField="designation" HeaderText="Designation" />
<asp:BoundField DataField="joiningdate" HeaderText="Joining date" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C#
code:
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)
{
BindData();
}
}
protected void BindData()
{
DataSet
ds = new DataSet();
ds.ReadXml(Server.MapPath("EmployeeDetails.xml"));
if (ds
!= null && ds.HasChanges())
{
gvEmployee.DataSource = ds;
gvEmployee.DataBind();
}
}
}