How to Create/Add tooltip in Gridview Using Asp.Net/c#/JavaScript

Posted by on March 28, 2010 Leave a comment (1) Go to comments

Introduction:
In this article,i am going to explain about how to create a simple Viewtooltip in gridview using asp.net/c#/javascript.

Main:

In ViewViewtooltip.aspx,

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Viewtooltip.aspx.cs"
Inherits="Viewtooltip" %>
 
<!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 id="Head1" runat="server">
  <title>Untitled Page</title>
 
  <script language="JavaScript">
<!--
 
var bname;
var bversion;
var brows;
 
function CheckBrowser()
{
bname=navigator.appName;
bversion=parseInt(navigator.appVersion)
if (bname=="Netscape")
brows=true
else
brows=false
}
 
// Do not edit anything else in the script !!!!
 
function don(row,path){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if (brows){
 
document.layers['linkex'].document.writeln('<img src='+path+' />');
document.layers['linkex'].document.close();
var rec = getoffset(row);
document.layers['linkex'].top=rec.Top+row.offsetTop;
document.layers['linkex'].left=rec.Left;
 
document.layers['linkex'].visibility="show";
}
else{
//debugger;
linkex.innerHTML='<img src='+path+' />';
var rec = getoffset(row);
linkex.style.top=rec.Top+row.offsetHeight;
linkex.style.left=rec.Left;
//linkex.style.background=bgcolor;
 
linkex.style.visibility="visible";
}
}
}
 
function doff(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if (brows)
document.layers['linkex'].visibility="hide";
else
linkex.style.visibility="hidden";
}
}
 
function   getoffset(e)
{  
var   t=e.offsetTop;  
var   l=e.offsetLeft;  
while(e=e.offsetParent)
{  
t+=e.offsetTop;  
l+=e.offsetLeft;  
}  
var   rec   = new Object();
 
rec.Top   =   t;
rec.Left  =   l;
 
return   rec
}
 
//-->
 
 
  </script>
 
</head>
<body onload='CheckBrowser();'>
  <form id="form1" runat="server">
      <div id="linkex" style="position: absolute; visibility: hidden; width: 80%">
      </div>
      <layer name="linkex" visibility="hide" width="80%:">
     </layer>
      <div>
          <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
          </asp:GridView>
      </div>
  </form>
</body>
</html>

In Viewtooltip.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class Viewtooltip : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
           bind();
   }
 
   private void bind()
   {
       DataTable table = new DataTable();
       table.Columns.Add("booktitle");
       table.Columns.Add("Viewtooltip");
 
 
       DataRow dr = table.NewRow();
       dr["booktitle"] = "aaaaa";
       dr["Viewtooltip"] = "cart_icon.jpg";
       table.Rows.Add(dr);
       DataRow dr1 = table.NewRow();
       dr1["booktitle"] = "ddd";
       dr1["Viewtooltip"] = "cart_icon2.jpg";
       table.Rows.Add(dr1);
       this.GridView1.DataSource = table;
       GridView1.DataBind();
   }
 
   protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
   {
       if (e.Row.RowType == DataControlRowType.DataRow)
       {
           DataRowView drv = ((DataRowView)e.Row.DataItem);
           string path = drv["Viewtooltip"].ToString();
           e.Row.Attributes.Add("onmouseover", "don(this,'" + path + "')");
           e.Row.Attributes.Add("onmouseout", "doff()");
       }
   }
}