ASP.NET is an open-source, server-side web-application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, applications and services.
In this article, I will show you how to open a fancy tooltip on mouseover in GridView. Check out the following code snippet.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewToolTip.aspx.cs"
Inherits="GridViewToolTip" %>
<!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>Untitled Page</title>
<script type="text/javascript">
function showTip(e, text)
{
e = (e == null) ? window.event : e;
target = (e.target) ? e.target : e.srcElement;
document.getElementById('text').innerHTML = text;
document.getElementById('tooltip').style.left = target.offsetLeft + 10 + 'px';
document.getElementById('tooltip').style.top = target.offsetTop + 20 + 'px';
document.getElementById('tooltip').style.display='block';
target.onmouseout = function() {document.getElementById('tooltip').style.display='none'};
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="Server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:LinkButton ID="lnk" runat="server" Text="Details" CausesValidation="False" />
<div id="tooltip" style="position: absolute; display: none; width: 300px; padding-left: 100px">
<div style="background: url(bubble2.gif) no-repeat top; padding: 50px 8px 0px; text-align: center">
<div id="text" style="padding-left: 10px; padding-right: 10px; position: relative">
</div>
</div>
<div style="background: url(bubble2.gif) no-repeat bottom; padding: 20px 8px 0px;
text-align: center;">
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</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 GridViewToolTip : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = GetData();
GridView1.DataBind();
}
}
public DataSet GetData()
{
DataSet ds = new DataSet();
DataTable dt = new DataTable("Movie");
DataRow dr;
dt.Columns.Add(new DataColumn("Id", typeof(Int32)));
dt.Columns.Add(new DataColumn("Name", typeof(string)));
for (int i = 0; i <= 5; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Name" + i.ToString();
dt.Rows.Add(dr);
}
ds.Tables.Add(dt);
Session["dt"] = dt;
return ds;
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
string strValue = string.Empty;
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton l = (LinkButton)e.Row.FindControl("lnk");
foreach (GridViewRow gv in GridView1.Rows)
{
strValue = gv.Cells[0].Text + gv.Cells[1].Text;
l.Attributes.Add("onmouseover", "javascript:showTip(event,'" + strValue + "')");
}
}
}
}