How To Open Fancy Tooltip from GridView

<%@ 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;">
                                   &nbsp;</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 + "')");

            }
           
        }
    }
}

3 comments:

  1. Hi,

    nice aricles you have in your blog, how i can contact you?

    thank you
    rave

    ReplyDelete
  2. Hi,

    You have nice articles, how could i contact you?

    ths
    rave

    ReplyDelete
  3. hi great atrticle it saved me a lot of time,thank you

    ReplyDelete