How To Open Fancy Tooltip from GridView

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" "">
<html xmlns="">
<head runat="server">
   <title>Untitled Page</title>

   <script type="text/javascript">
     function showTip(e, text)
           e = (e == null) ? window.event : e;
           target = ( ? : e.srcElement;
           document.getElementById('text').innerHTML = text;
           document.getElementById('tooltip').style.left = target.offsetLeft + 10 + 'px';
           document.getElementById('tooltip') = target.offsetTop + 20 + 'px';
           target.onmouseout = function() {document.getElementById('tooltip').style.display='none'};

   <form id="form1" runat="server">
           <asp:GridView ID="GridView1" runat="Server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
                   <asp:BoundField DataField="Id" HeaderText="Id" />
                   <asp:BoundField DataField="Name" HeaderText="Name" />
                   <asp:TemplateField HeaderText="Description">
                           <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 style="background: url(bubble2.gif) no-repeat bottom; padding: 20px 8px 0px;
                                   text-align: center;">
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();

    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();
        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 + "')");

Next Post Previous Post
No Comment
Add Comment
comment url