Display Alert on Mouse Hover (Over) using jQuery

Hi ruben00000,

Please refer below sample.

HTML

<div id="progress-body">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "CS.aspx/GetJson",
            type: "POST",
            data: {},
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (resp) {
                if (resp["model"] == "error") {
                    alert("error");
                }
                else {
                    var data = resp.d;
                    for (var i in data) {
                        $('#progress-body').append(
                            '<ol style="color: white">'
                            + '<li>'
                            + '<span id="no_velivery" style="margin-top: -20px; position: absolute; margin-left: -40px">' + data[i].shipment_number
                            + '</span>'
                            + '<span id="_point" class="point">' + '<input name="shipment_id" id="i_shipment_id" class="shipment_id" style="visibility:hidden;" value="' + data[i].shipment_id + '" />' + '</span>'
                            + '</li>'
                            + '</ol >'
                            + '</hr>'
                        );
                    }
                }
            },
            error: function (response) { alert(response.responseText); }
        });

        $('body').on('mouseover', '.point', function () {
            var shipment_id = $(this).find('.shipment_id').val();
            alert(shipment_id);
        });
    });
</script>

Namespaces

C#

using Newtonsoft.Json;
using System.Web.Services;

Code

C#

[WebMethod]
public static List<Root> GetJson()
{
    string jsonString = File.ReadAllText(HttpContext.Current.Server.MapPath("~/json.json"));
    List<Root> json = JsonConvert.DeserializeObject<List<Root>>(jsonString);
    return json;
}

public class Detail
{
    public int shipment_destination_id { get; set; }
    public int shipment_id { get; set; }
    public int number { get; set; }
    public string destination_geofence_name { get; set; }
    public object arrival_time { get; set; }
    public object departure_time { get; set; }
    public DateTime planned_arrival_time { get; set; }
    public DateTime planned_departure_time { get; set; }
}

public class Root
{
    public int shipment_id { get; set; }
    public string vehicle_name { get; set; }
    public DateTime shipment_date { get; set; }
    public string shipment_number { get; set; }
    public string origin_geofence_code { get; set; }
    public DateTime planned_departure_time { get; set; }
    public object departure_time { get; set; }
    public object progress { get; set; }
    public string driver_name { get; set; }
    public List<Detail> detail { get; set; }
}

 Json

[
  {
    "shipment_id": 10008,
    "vehicle_name": "NusaFleet-03",
    "shipment_date": "\/Date(1682355600000)\/",
    "shipment_number": "A-098837772",
    "origin_geofence_code": "Home Panji",
    "planned_departure_time": "\/Date(1682357400000)\/",
    "departure_time": null,
    "progress": null,
    "driver_name": null,
    "detail": [
      {
        "shipment_destination_id": 10010,
        "shipment_id": 10008,
        "number": 1,
        "destination_geofence_name": "Diratna HomeStay",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682359200000)\/",
        "planned_departure_time": "\/Date(1682380800000)\/"
      },
      {
        "shipment_destination_id": 10011,
        "shipment_id": 10008,
        "number": 2,
        "destination_geofence_name": "Kasipah",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682445600000)\/",
        "planned_departure_time": "\/Date(1682445600000)\/"
      },
      {
        "shipment_destination_id": 10012,
        "shipment_id": 10008,
        "number": 3,
        "destination_geofence_name": "pool tika",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682449200000)\/",
        "planned_departure_time": "\/Date(1682449200000)\/"
      },
      {
        "shipment_destination_id": 10013,
        "shipment_id": 10008,
        "number": 4,
        "destination_geofence_name": "temtrem",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682451000000)\/",
        "planned_departure_time": "\/Date(1682452800000)\/"
      },
      {
        "shipment_destination_id": 10014,
        "shipment_id": 10008,
        "number": 5,
        "destination_geofence_name": "pool tikas",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682458200000)\/",
        "planned_departure_time": "\/Date(1682465400000)\/"
      }
    ]
  },
  {
    "shipment_id": 10009,
    "vehicle_name": "NusaFleet-01",
    "shipment_date": "\/Date(1682355600000)\/",
    "shipment_number": "000000092",
    "origin_geofence_code": "pool tikas",
    "planned_departure_time": "\/Date(1682362800000)\/",
    "departure_time": null,
    "progress": null,
    "driver_name": "Sugito",
    "detail": [
      {
        "shipment_destination_id": 10015,
        "shipment_id": 10009,
        "number": 1,
        "destination_geofence_name": "Diratna HomeStay",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682442000000)\/",
        "planned_departure_time": "\/Date(1682528400000)\/"
      },
      {
        "shipment_destination_id": 10016,
        "shipment_id": 10009,
        "number": 2,
        "destination_geofence_name": "temtrem",
        "arrival_time": null,
        "departure_time": null,
        "planned_arrival_time": "\/Date(1682622000000)\/",
        "planned_departure_time": "\/Date(1682715600000)\/"
      }
    ]
  }
]

 Screenshot