javascript - 如何在javascript中的点击位置显示工具提示(内容存储在数组中)？

Question

我有一个带有 id、lines 的 div。它包含一个草图(以编程方式) map 。我跟踪鼠标单击坐标，以便可以在单击位置显示工具提示。我需要在工具提示中包含signo[i]和status[i]的内容。你能告诉我如何在 JavaScript 中做到这一点吗？

代码:

        <div id="lines" onclick="showCoords(event)">

        <script>
 b = xmlDoc.getElementsByTagName("TRACK");


 jQuery.ajax({
               type: "POST",
               url: "WebForm1.aspx/GetStations", //It calls our web method  
               contentType: "application/json; charset=utf-8",
               data: JSON.stringify({ myArray1: dl_id_track, myArray2: dl_id_gate, myArray3: dl_id_point}),
               dataType: "json",
               async: true,
               success: function (data) {

                if (data != null) {
                     var len = data.d.length;                                                 
                       for (var i = 0; i < len; i++) {
                           signo[i] = data.d[i].signo;
                           status[i] = data.d[i].status;
                           }

         function showCoords(event) {
                   var xcoord = event.clientX;
                   var ycoord = event.clientY;
                   var coords = "X coords: " + xcoord + ", Y coords: " + ycoord;
                   document.getElementById("demo1").innerHTML = coords;
                   for (var i = 0; i < b.length; i++) {
                       var x1 = parseInt(left_track[i]) + parseInt(x1_track[i]);
                       var y1 = parseInt(top_track[i]) + parseInt(y1_track[i]);
                       var x2 = parseInt(left_track[i]) + parseInt(x2_track[i]);
                       var y2 = parseInt(top_track[i]) + parseInt(y2_track[i]);
                                         var slope = (y2 - y1) / (x2 - x1);
                       var line = (slope * xcoord) - ycoord - x1 + y1;
                       if (line == 0) {
                                                asset = "track";
                       }
                   }

               }

    </script>

Answer 1

使用标题属性

此处以下内容将显示为工具提示

function showCoords(event) {
               var xcoord = event.clientX;
               var ycoord = event.clientY;
               var coords = "X coords: " + xcoord + ", Y coords: " + ycoord;
               document.getElementById("demo1").innerHTML = coords;
               for (var i = 0; i < b.length; i++) {
                   var x1 = parseInt(left_track[i]) + parseInt(x1_track[i]);
                   var y1 = parseInt(top_track[i]) + parseInt(y1_track[i]);
                   var x2 = parseInt(left_track[i]) + parseInt(x2_track[i]);
                   var y2 = parseInt(top_track[i]) + parseInt(y2_track[i]);
                                     var slope = (y2 - y1) / (x2 - x1);
                   var line = (slope * xcoord) - ycoord - x1 + y1;
                   if (line == 0) {
                                            asset = "track";
                   }
               }
           document.getElementById("lines").title =coords;
           }

用它来定位工具提示

HTML-Tooltip position relative to mouse pointer