How to show a small window on mousehover in asp.net

Question

I am currently working in asp.net. I am showing list of employees where I want that when user takes the mouse on any employee's image it should show a small window just beside the pointer which shows some of the details of that employee which will come from database. Please help me for this. Below I am attaching a picture which is giving idea of what I want

在此处输入图片说明

Answer 1

HTML Page..

<%@ 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>gridview header</title>

    <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>

    <script src="jquery.tooltip.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function InitializeToolTip() {

            $(".gridViewToolTip").tooltip({

                track: true,

                delay: 0,

                showURL: false,

                fade: 100,

                bodyHandler: function () {

                    return $($(this).next().html());

                },

                showURL: false

            });

        }

    </script>

    <script type="text/javascript">

        $(function () {

            InitializeToolTip();

        })

    </script>

    <style type="text/css">

        #tooltip    {

            position: absolute;

            z-index: 3000;

            border: 1px solid #111;

            background-color: #C2E0FF;

            padding: 5px;

            opacity: 0.85;    }

        #tooltip h3, #tooltip div

        {  margin: 0;  }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false"

            Width="660px" Height="214px">

            <HeaderStyle BackColor="#3E3E3E" Font-Names="Calibri" ForeColor="White" />

            <RowStyle Font-Names="Calibri" />

            <Columns>              

                <asp:TemplateField >

                    <ItemStyle Width="30px" HorizontalAlign="Center" />

                    <ItemTemplate>

                        <a href="#" class="gridViewToolTip" style="text-decoration: none">Details

                         </a>

                        <div id="tooltip" style="display: none;">

                            <table>

                                <tr> <td style="white-space: nowrap;"><b>Name:</b>&nbsp;</td>

                                    <td><%# Eval("name")%></td></tr>

                                <tr><td style="white-space: nowrap;"><b>City:</b>&nbsp;</td>

                                    <td><%# Eval("city")%></td></tr>

                                <tr><td style="white-space: nowrap;"><b>Country:</b>&nbsp;</td>

                                    <td> <%# Eval("country")%> </td> </tr>

                                <tr><td style="white-space: nowrap;"><b>Designation:</b>&nbsp;</td>

                                     <td><%# Eval("designation")%></td></tr>

                               <tr> <td style="white-space: nowrap;"> <b>Joining date:</b>&nbsp;</td>

                                    <td> <%# Eval("joiningdate")%> </td> </tr>

                            </table>

                        </div>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:BoundField DataField="name" HeaderText="Name" />

                <asp:BoundField DataField="city" HeaderText="City" />

                <asp:BoundField DataField="country" HeaderText="Country" />

                <asp:BoundField DataField="designation" HeaderText="Designation" />

                <asp:BoundField DataField="joiningdate" HeaderText="Joining date" />                 

            </Columns>

        </asp:GridView>

    </div>  

    </form>

</body>

</html>

CS Page..

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 _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            BindData();

        }

    }

    protected void BindData()

    {

        DataSet ds = new DataSet();

        ds.ReadXml(Server.MapPath("EmployeeDetails.xml"));

        if (ds != null && ds.HasChanges())

        {

            gvEmployee.DataSource = ds;

            gvEmployee.DataBind();

        }

    }       

}
- See more at: http://www.dotnetfox.com/articles/show-gridview-row-details-in-tooltip-on-mouseover-using-jquery-in-Asp-Net-1

062.aspx#sthash.kXXvwT39.dpuf

How to show a small window on mousehover in asp.net

Question

1 answers

solution1
0 2015-01-12 11:27:16

How to show a small window on mousehover in asp.net

Question

1 answers

solution1 0 2015-01-12 11:27:16

solution1
0 2015-01-12 11:27:16