Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Tool Tip On Mouse Hover in asp.net GridView

Article:
Viewed:  5067 
Posted On:  31/05/2013 12:51:09 
How we can show grid view row details in tool tip on mouse over by using jQuery in asp.net and C# 

In this article I am going to show how we can show a record as tool tip on mouse hover in a Grid View in asp.net using jQuery.

below is the working of my program.

Records are displaying in  a Grid View on Mouse Hover as Tool Tip...

1.png

Image 1.

2.png

Image 2.

aspx code for this is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Show Information in Tool Page in ASP.NET GridView Using jQuery</title> 
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
    <script src="jquery.tooltip.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ToolTipSHOW() {
        $(".OnShowToolTip").tooltip({
        track: true,
        delay: 0,
        showURL: false,
        fade: 100,
        bodyHandler: function () {
        return $($(this).next().html());
        },
        showURL: false
        });
        }
    </script>

    
<script type="text/javascript">
        $(function () {
           ToolTipSHOW();
         })
    </script> 

    <style type="text/css">
        #tooltip
        {
            position: absolute;
            z-index: 3000;
            border: 1px solid #111;
            background-color: #CEE3F6;
            padding: 5px;
            opacity: 0.85;
        }
        #tooltip h3, #tooltip div
        {
            margin: 0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <table cellpadding="20" cellspacing="20" width="50%" align="center" border="2">
            <tr>
                <td align="center">
                    <asp:GridView runat="server" ID="GridEmployee" AutoGenerateColumns="False" HeaderStyle-BackColor="#7779AF"
                        HeaderStyle-ForeColor="White" CellPadding="4" ForeColor="#333333" GridLines="None">
                        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                        <Columns>
                            <asp:BoundField DataField="EmployeeNo" HeaderText="EmployeeNo" />
                            <asp:TemplateField HeaderText="Name">
                                <ItemStyle Width="30px" HorizontalAlign="Center" />
                                <ItemTemplate>
                                    <a href="#" class="OnShowToolTip">
                                        <%# Eval("Name")%></a>
                                    <div id="tooltip" style="display: none;">
                                        <table>
                                            <tr>
                                                <td style="white-space: nowrap;">
                                                    <b>Emp Name:</b>&nbsp;
                                                </td>
                                                <td>
                                                    <%# Eval("Name")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="white-space: nowrap;">
                                                    <b>ID:</b>&nbsp;
                                                </td>
                                                <td>
                                                    <%# Eval("EmployeeNo")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="white-space: nowrap;">
                                                    <b>Emp Code:</b>&nbsp;
                                                </td>
                                                <td>
                                                    <%# Eval("EmployeeCode")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="white-space: nowrap;">
                                                    <b>Keywords:</b>&nbsp;
                                                </td>
                                                <td>
                                                    <%# Eval("Keywords")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="white-space: nowrap;">
                                                    <b>Mobile:</b>&nbsp;
                                                </td>
                                                <td>
                                                    <%# Eval("Mobile")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="white-space: nowrap;">
                                                    <b>Country:</b>&nbsp;
                                                </td>
                                                <td>
                                                    <%# Eval("Country")%>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="EmployeeCode" HeaderText="EmployeeCode" />
                            <asp:BoundField DataField="Keywords" HeaderText="Keywords" />
                            <asp:BoundField DataField="Mobile" HeaderText="Mobile" />
                            <asp:BoundField DataField="Country" HeaderText="Country" />
                        </Columns>
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <HeaderStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True"></HeaderStyle>
                        <EditRowStyle BackColor="#999999" />
                        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

aspx.cs code is:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
 
public partial class _Default : System.Web.UI.Page
{
    SqlDataAdapter da;
    DataSet ds = new DataSet();
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindData();
        }
    }
 
    private void BindData()
    {
        SqlConnection con = new SqlConnection(@"Server=.;Database=Test;Integrated Security=true;");
        SqlCommand cmd = new SqlCommand("SELECT  * FROM Employee", con);
 
        try
        {
            da = new SqlDataAdapter(cmd);
            da.Fill(ds);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
 
            if (!object.Equals(ds.Tables[0], null))
            {
                if (ds.Tables[0].Rows.Count > 0)
                {
                    GridEmployee.DataSource = ds.Tables[0];
                    GridEmployee.DataBind();
                }
                else
                {
                    GridEmployee.DataSource = null;
                    GridEmployee.DataBind();
                }
            }
            else
            {
                GridEmployee.DataSource = null;
                GridEmployee.DataBind();
            }
        }
        catch (Exception ex)
        {
        }
    }
 }

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us