As by caption in a point created in an image

Question

I have a code that draws dots on an image based on my select options. Each point is related to a select and therefore I would like to know how to put a legend with the name of each select in the point, or rather the acronyms to identify each point.

<li class="active"><a href="#"><label class="filter-label" >Pontos</label><select id = "pointsId" style="width: 80%; color:black">
                    <option selected>Selecione</option>
                    <option>Básio (Ba)</option>
                    <option>Sela (S)</option>
                    <option>Násio (N)</option>
                    <option>Espinha nasal anterior (ENA)</option>
                    <option>Espinha nasal posterior (ENP)</option>
                    <option>Ponto A (subespinhal)</option>
                    <option>Ponto B (pupramental)</option>
                    <option>Próstil (Pr)</option>
                    <option>Infradental (Id)</option>
                    <option>Pogônio (Pog)</option>
                    <option>Gnátio (Gn)</option>
                    <option>Mento (Me)</option>
                    <option>Ponto D (D)</option>
                    <option>Bolton (Bo)</option>
                    <option>Articular (Ar)</option>
                    <option>Pório (Po)</option>
                </select></a></li>

The js:

function coordenadas(event) {
var selectedIndex = document.getElementById("pointsId").selectedIndex;
var currentPoint = 
document.getElementById("pointsId").options[selectedIndex].text;
if (currentPoint != "Selecione") {
x = event.pageX;
y = event.pageY;
saveX = x;
saveY = y;

var div = document.getElementById('image');
if (!global_points[currentPoint]) {
    global_points[currentPoint] = new Array();
}
global_points[currentPoint].X = x;
global_points[currentPoint].Y = y;

if (global_points[currentPoint].htmlPoint) {
    global_points[currentPoint].htmlPoint.outerHTML = ''; /*erase the 
point*/
    global_points[currentPoint].htmlPoint = null;
}
var pto = document.querySelector('#image .ponto');
var ponto = document.createElement("span");
global_points[currentPoint].htmlPoint = ponto;

ponto.setAttribute("class", "ponto");
div.style.position = "relative";
var imgOfLf = $("#image").offset().left;
var imgOfTp = $("#image").offset().top;
ponto.style.cssText = "top: " + Math.floor(parseInt(y) - imgOfTp - 2.5) 
+ "px; left: " + Math.floor(parseInt(x) - imgOfLf - 2.5) + "px;";
div.appendChild(ponto); // crio o ponto
var data_json = toJSON(global_points);

var hiddenForm = document.getElementById("saved_points");
hiddenForm.setAttribute("value", data_json);
}
}

the CSS:

.ponto{
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #FF0000;
position: absolute;
}

#image{
position: relative;
}

Answer 1

You can enter a span in div with the text of the selected option. Create a style in CSS that will be subtitle formatting (you adjust the color, font size, background color etc. as you want):

.legendas{
   position: absolute;
   background-color: rgba(255, 255, 255, .9);
   color: #000;
   display: inline-block;
   padding: 2px;
   font-size: 12px;
}

Also create a counter to create ids unique to each legend. Put out of function:

var legenda_id = 0;

Then add this code right after the stitch has been created:

//cria a legenda e posiciona
var sigla = $("#pointsId option:selected").text().match(/\(\w+\)/)[0];
var legs = $("span[id^='legenda']");
legs.each(function(){
    if($(this).text() == sigla) $(this).remove();
});
$("#image").append('<span id="legenda'+legenda_id+'" class="legendas">'+sigla+'</span>');
var legenda_width = $("#legenda"+legenda_id).width()/2;
$("#legenda"+legenda_id).css({
   "top": Math.floor(parseInt(y) - imgOfTp + 5)+"px",
   "left": Math.floor(parseInt(x) - imgOfLf - legenda_width - 2.5)+"px"
});
legenda_id++;
$("span.ponto").each(function(i,e){
    if(e.nextSibling && e.nextSibling.className != "legendas") e.outerHTML = '';
});

Working example:

var legenda_id = 0;
function coordenadas(event){
   x = event.clientX;
   y = event.clientY;
   
   var div = document.getElementById('image');
   var ponto = document.createElement("span");
   ponto.className = "ponto";
   var imgOfLf = $("#image").offset().left;
   var imgOfTp = $("#image").offset().top;
   ponto.style.cssText = "top: " + Math.floor(parseInt(y) - imgOfTp - 2.5) + "px; left: " + Math.floor(parseInt(x) - imgOfLf - 2.5) + "px;";
   div.appendChild(ponto); // crio o ponto
   
   //cria a legenda e posiciona
   var sigla = $("#pointsId option:selected").text().match(/\(\w+\)/)[0];
   var legs = $("span[id^='legenda']");
   legs.each(function(){
       if($(this).text() == sigla) $(this).remove();
   });
   $("#image").append('<span id="legenda'+legenda_id+'" class="legendas">'+sigla+'</span>');
   var legenda_width = $("#legenda"+legenda_id).width()/2;
   $("#legenda"+legenda_id).css({
      "top": Math.floor(parseInt(y) - imgOfTp + 5)+"px",
      "left": Math.floor(parseInt(x) - imgOfLf - legenda_width - 2.5)+"px"
   });
   legenda_id++;

   $("span.ponto").each(function(i,e){
       if(e.nextSibling && e.nextSibling.className != "legendas") e.outerHTML = '';
   });

}

function image() {
   var x = Math.floor(Math.random() * (17 - 1) + 1);
   var img = new Image();
   img.src = "https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg";
   document.getElementById('image').innerHTML = "<img style=\"cursor:crosshair\" href=\"#\" onmousedown= \"coordenadas(event)\" src=\""
       + img.src + "\" width=1100 />";
}
image();

.ponto{
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background-color: #FFFF00;
   position: absolute;
}

#image{
   position: relative;
}

.legendas{
   position: absolute;
   background-color: rgba(255, 255, 255, .9);
   color: #000;
   display: inline-block;
   padding: 2px;
   font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "pointsId" style="width: 80%; color:black">
   <option>Selecione</option>
   <option selected>Básio (Ba)</option>
   <option>Sela (S)</option>
   <option>Násio (N)</option>
   <option>Espinha nasal anterior (ENA)</option>
   <option>Espinha nasal posterior (ENP)</option>
   <option>Ponto A (subespinhal)</option>
   <option>Ponto B (pupramental)</option>
   <option>Próstil (Pr)</option>
   <option>Infradental (Id)</option>
   <option>Pogônio (Pog)</option>
   <option>Gnátio (Gn)</option>
   <option>Mento (Me)</option>
   <option>Ponto D (D)</option>
   <option>Bolton (Bo)</option>
   <option>Articular (Ar)</option>
   <option>Pório (Po)</option>
</select>
<br>

<div id="image"></div>