Home > ASP.Net > Gridview Row Tooltip

Gridview Row Tooltip


try this example to Show Tooltip with Gridview Row

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
     function ShowTooltip(name,address,city,state,phone1,fax)
     // var Popup = document.getElementById("Popup");
      x = event.clientX + document.body.scrollLeft;
      y = event.clientY + document.body.scrollTop + 10;
      Popup.style.left = x;
      Popup.style.top = y;

  function HideTooltip()
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
                <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
                <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
                <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
                <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [Phone] FROM [Customers]">
    <div id="Popup">
   <div style="BACKGROUND-COLOR: #003366"><b><center>Address</center></b></div>
       <table width="100%" border=0 cellpadding=0 cellspacing=0>
        <td id=td0 align=left></td>
        <td id=td1 align=left></td>
        <td id=td2 align=left></td>
        <td id=td3 align=left></td>
        <td id=td4 align=left></td>
        <td id=td5 align=left></td>

and in code behind :-

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        if (e.Row.RowType == DataControlRowType.DataRow)
            e.Row.Attributes.Add("onmouseover", "ShowTooltip('" +
                        DataBinder.Eval(e.Row.DataItem, "CompanyName").ToString() + "','" +
                        DataBinder.Eval(e.Row.DataItem, "CustomerID").ToString() + "','" +
                        DataBinder.Eval(e.Row.DataItem, "ContactName").ToString() + "','" +
                        DataBinder.Eval(e.Row.DataItem, "Address").ToString() + "', '" +
                        DataBinder.Eval(e.Row.DataItem, "City").ToString() + "','" +
                        DataBinder.Eval(e.Row.DataItem, "Phone").ToString() +
            e.Row.Attributes.Add("onmouseout", "HideTooltip();");

Hope this helps

Good Luck

Categories: ASP.Net
  1. December 7, 2011 at 9:45 am

    hi its a nice code,its working in IE8 but not in FF8.0.1

  2. yasserzaid
    December 19, 2011 at 7:16 pm

    @prashanths1986 :- you are welcome … and let me try it with FF and see

  3. December 7, 2012 at 4:01 am

    I have been surfing world wide web more than 4 hours now, nonetheless I rarely found any fascinating write-up such as the one you
    have. It is reasonably beneficial enough for me. In my view,
    if most web owners as well as blog owners created good material as you
    did, the web will likely be much more important than ever before.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: