Show grid view row details in to tool tip by JQuery :

-

Show grid view row details in to tool tip by JQuery :



In Asp.net programming some time we need to show tool tip, as like when we represent data in to Graph asp.net programming, Grid view bind inAsp.net programming, and many other time. Then we need to show the tool tip.
The ToolTip property is used to set or return the text that appears when the user rests the mouse pointer over a control.

In the Asp.net the text displayed when the mouse pointer hovers over the Web server control.

Code  for design page (.aspx page)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></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: #FEE18D;
 padding: 5px;
 opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails"
AutoGenerateColumns="false" CellPadding="5"
runat="server">
<Columns>
<asp:TemplateField HeaderText="UserId">
 <ItemStyle Width="30px"
HorizontalAlign="Center" />
<ItemTemplate>
  <a href="#" class="gridViewToolTip"><%# Eval("UserId")%></a>
  <div id="tooltip" style="display: none;">
<table>
 <tr>
  <td style="white-space: nowrap;">
<b>UserName:</b>&nbsp;</td>
  <td><%# Eval("UserName")%></td>
 </tr>
 <tr>
  <td style="white-space: nowrap;">
<b>Education:</b>&nbsp;</td>
  <td><%# Eval("Education")%></td>
 </tr>
 <tr>
     <td style="white-space: nowrap;">
<b>Location:</b>&nbsp;</td>
  <td><%# Eval("Location")%></td>
 </tr>
</table>
  </div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="UserName"
DataField="UserName" />
<asp:BoundField HeaderText="Education"
DataField="Education" />
<asp:BoundField HeaderText="Location"
DataField="Location" />
</Columns> </asp:GridView>
</div>
</form> </body> </html>

Code for coding page (.aspx.cs page)

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
public partial class ShowGridviewRowsDatainTooltip : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
protected void BindGridview()
{
DataTable dt = new DataTable();


dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Columns.Add("Location", typeof(string));


DataRow dtrow = dt.NewRow();
// Create New Row
dtrow["UserId"] = 1;//Bind Data to Columns
dtrow["UserName"] = "ABC";
dtrow["Education"] = "BSC";
dtrow["Location"] = "LUCKNOW";
dt.Rows.Add(dtrow);


dtrow = dt.NewRow();
// Create New Row
dtrow["UserId"] = 2;//Bind Data to Columns
dtrow["UserName"] = "CDE";
dtrow["Education"] = "BA";
dtrow["Location"] = "Sitapur";
dt.Rows.Add(dtrow);


dtrow = dt.NewRow();
 // Create New Row
dtrow["UserId"] = 3;  //Bind Data to Columns
dtrow["UserName"] = "Ram";
dtrow["Education"] = "Art";
dtrow["Location"] = "Unnao";
dt.Rows.Add(dtrow);
gvDetails.DataSource = dt;
gvDetails.DataBind();
}
}

Here We  use online javascript file :-


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

Tooltip Formating :-


<style type="text/css">
 #tooltip {
 position: absolute;
 z-index: 3000;
 border: 1px solid #111;
 background-color: #FEE18D;
 padding: 5px;
 opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
For this you need to a JQuery file so download this file for Inter net
File name is :  jquery.tooltip.min

 

Old Post :-

Popular posts from this blog