Skip to main content

How To Add Tooltip in GridView




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tooltip.aspx.cs"
Inherits="tooltip" %>


<!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 reg()
{
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='reg();'>
<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>


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 tooltip : 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("tooltip");


DataRow dr = table.NewRow();
dr["booktitle"] = "aaaaa";
dr["tooltip"] = "cart_icon.jpg";
table.Rows.Add(dr);
DataRow dr1 = table.NewRow();
dr1["booktitle"] = "ddd";
dr1["tooltip"] = "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["tooltip"].ToString();
e.Row.Attributes.Add("onmouseover", "don(this,'" + path + "')");
e.Row.Attributes.Add("onmouseout", "doff()");
}
}
}

Comments

Popular posts from this blog