Asp.net gridview row custom tool tip using jquery and javascript

The below example will give you an idea about how to create a custom tool tip for gridview row and show it in mouse over of the row. you can change the css style of class ".tooltip" and binding the tool tip value in grid view according to your need.

GridToolTip.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridToolTip.aspx.cs" Inherits="GridToolTip" %> <!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></title> <style type="text/css"> .tooltip { display: none; border: solid 1px #708069; background-color: #289642; color: #fff; line-height: 25px; border-radius: 5px; padding: 5px 10px; position: absolute; z-index: 1001; } </style> <script src="//code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <script language="javascript"> $(document).ready(function () { $(".tooltip").closest("tr").mousemove(function (event) { $(this).find(".tooltip").css({ "left": event.pageX + 1, "top": event.pageY + 1 }).show(); }).mouseout(function () { $(this).find(".tooltip").hide(); });; }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="gv" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false"> <AlternatingRowStyle BackColor="White" /> <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" /> <SortedAscendingCellStyle BackColor="#FDF5AC" /> <SortedAscendingHeaderStyle BackColor="#4D0000" /> <SortedDescendingCellStyle BackColor="#FCF6C0" /> <SortedDescendingHeaderStyle BackColor="#820000" /> <Columns> <asp:BoundField HeaderText="SNO" DataField="SNO" /> <asp:BoundField HeaderText="Department" DataField="Department" /> <asp:BoundField HeaderText="EmpName" DataField="EmpName" /> <asp:BoundField HeaderText="EmpNo" DataField="EmpNo" /> <asp:BoundField HeaderText="Location" DataField="Location" /> <asp:BoundField HeaderText="Designation" DataField="Designation" /> <asp:TemplateField> <ItemTemplate> <div class="tooltip"> SNO : <%#Eval("SNO")%><br /> Department : <%#Eval("Department")%><br /> EmpName : <%#Eval("EmpName")%><br /> EmpNo :<%#Eval("EmpNo")%> <br /> Location : <%#Eval("Location")%><br /> Designation :<%#Eval("Designation")%><br /> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form> </body> </html>

GridToolTip.aspx.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; public partial class GridToolTip : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { bindGrid(); } } public void bindGrid() { DataTable dt = new DataTable(); dt.Columns.Add("SNO"); dt.Columns.Add("Department"); dt.Columns.Add("EmpName"); dt.Columns.Add("EmpNo"); dt.Columns.Add("Location"); dt.Columns.Add("Designation"); for (int i = 0; i < 10; i++) { DataRow dr = dt.NewRow(); dr["SNO"] = i; dr["Department"] = "Department-" + i; dr["EmpName"] = "EmpName-" + i; dr["EmpNo"] = "EmpNo-" + i; dr["Location"] = "Location-" + i; dr["Designation"] = "Designation-" + i; dt.Rows.Add(dr); dt.AcceptChanges(); } gv.DataSource = dt; gv.DataBind(); } }

Output: