Q.How to Show grid view column text data into popup

JavaScript Code

    <script src="Scripts/jquery-3.3.1.js"></script>

    <script type="text/javascript">
        $(document).ready(function () { 
        $(".row_dd").on("mouseenter", function (e) {
            var self = $(this).find(".dataDiv");
            var name = self.attr("data-name");
             $("#dd_name").html(name)
            var x_value = e.pageX;
            var y_value = e.pageY;
            $("#detailedData").css({
                "top": y_value,
                "left": x_value
            }).show();
        });

        $(".row_dd").on("mouseleave", function (e) {
            $("#detailedData").hide();
        });
        });

    </script>

CSS FILE

 <style type="text/css">
         dl {
     margin: 0;
     padding: 0;
 }
 #detailedData {
     background-color: #f1f1f1;
     border: 1px solid #d4d4d4;
     border-radius: 3px;
     position: absolute;
     width: 250px;
     box-shadow: 8px 8px 5px #888888;
 }
 dl dt {
     color: #333;
     float: left;
     font-weight: bold;
     margin-left: 10px;
     margin-right: 2px;
     padding: 5px;
     width: 66px;
 }
 dl dd {
     margin: 2px 0;
     padding: 5px 0;
 }
 .hideIT {
     display: none;
 }
 .row_dd:hover {
     background-color: #eee !important;
     color: #333;
 }
 .header_dd {
     background-color: #6b696b;
     color: White;
     font-weight: bold;
 }
 td, th {
     padding: 4px;
 }

    </style>

.ASPX PAGES


 <div>
        <asp:GridView ID="gv_MouseOverData" runat="server" RowStyle-CssClass="row_dd" HeaderStyle-CssClass="header_dd" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="user_name" HeaderText="Name" />
                <asp:BoundField DataField="department_name" HeaderText="Department" />
                <asp:BoundField DataField="phone_no" HeaderText="Phone No" />
                <asp:TemplateField HeaderStyle-CssClass="hideIT">
                    <HeaderStyle CssClass="hideIT"></HeaderStyle>
                    <ItemStyle CssClass="hideIT" />
                    <ItemTemplate>
                        <div class="dataDiv" data-name="<%# Eval(" user_name ") %>" data-city="<%# Eval(" city ") %>" data-country="<%# Eval(" country ") %>" data-gender="<%# Eval(" gender ") %>" data-email="<%# Eval(" email_id ") %>"></div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

        <div id="detailedData" style="display: none;">
            <dl>
                <dt>Name: </dt>
                <dd id="dd_name"></dd>             
            </dl>
            

</div>

ASPX.CS PAGES

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace UploadAndDownload
{
    public partial class WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                bindGridview_mouse_over_detailedData();
            }
        }
        public void bindGridview_mouse_over_detailedData()
        {
            // Created a new datatable
            DataTable dt = new DataTable();

            // Added columns to thedatatable
            dt.Columns.Add("user_name", typeof(string));
            dt.Columns.Add("department_name", typeof(string));
            dt.Columns.Add("phone_no", typeof(string));
            dt.Columns.Add("gender", typeof(string));
            dt.Columns.Add("email_id", typeof(string));
            dt.Columns.Add("city", typeof(string));
            dt.Columns.Add("country", typeof(string));

            // Add rows (data) to the datatable
            dt.Rows.Add("John is a good boy. he is caring of his parents and doing hard work. ", "Technical", "0099890XX", "Male", "john@abc.com", "New York", "USA");
            dt.Rows.Add("Leslie is a john wife she has two child .she is also doing job in software company", "Management", "00447993XXX", "Female", "leslie@abc.com", "Qweenzland", "Australia");
            dt.Rows.Add("David", "Testing", "0782890XX", "Male", "david@abc.com", "Texas", "USA");
            dt.Rows.Add("Amit", "IT", "0562890XX", "Male", "amit@abc.com", "Mumbai", "India");
            dt.Rows.Add("Satinder", "IT", "055720XX", "Male", "satinder@abc.com", "Mumbai", "India");
            dt.Rows.Add("Andrea", "Server", "0077993XXX", "Female", "andrea@abc.com", "Santa Paulo", "Brazil");

            gv_MouseOverData.DataSource = dt;
            gv_MouseOverData.DataBind();
        }
    }

}