Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Tuesday, May 27, 2014

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