How to display tooltips(content is stored in arrays) at clicked position in javascript?

Question

I have a div with id, lines. It contains a sketched(programmatically) map. I keep track of the mouse click coordinates so that I can display tooltips at clicked position. I need to include the content of signo[i] and status[i] in the tooltip. Could you tell me how to do that in javascript?

Code :

        <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>

Your question lacks information. We can't help you as expected, unless you provide with more details. — Rüzgar, Apr 26 '17 at 12:35
I need something like this. http://jsfiddle.net/msepehr/whxad33q/ — padma, Apr 27 '17 at 05:16

score 0 · Answer 1 · edited May 23 '17 at 11:46

use title Attribute

Below content here will show as tool tip

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;
           }

use this to position you tooltip

HTML-Tooltip position relative to mouse pointer

title attribute is used in html. I want to show the tooltip at the clicked position in Javascript. — padma, Apr 26 '17 at 12:31

How to display tooltips(content is stored in arrays) at clicked position in javascript?

1 Answers1