Displaying names onmouseover

I have a photo with several people on a website (made with php) and would like to obtain the following: when the cursor is moved over the face of a person, the name of the person is displayed at the bottom of the photo. After a lot of search, I found some code on another website that was close to what I wanted and after I changed a few things I got it to do (mostly) what I want but I really do not understand much of it and I am convinced there must be a simpler way to do it. The code is copied below. The text "Name1" appears at the bottom of the photo when the cursor is at the position specified by the first "hotspot" class, and the text "Name2" appears when the cursor is at the position specified in the second "hotspot" class.

These are my questions:

Could somebody explain how it works, and if it could be simplified
Why if I replace Name1 with FirstName LastName the output is on two different lines. Nothing seems to fix this other than placing FirstName, LastName inside a table with a single row, and even then the spacing between words is not right and cannot be controlled
Why does this code only work with Google Chrome or Firefox but not with Safari or the Windows browser.

Thanks for any hints, even if partial.

The first batch of code is the css file, the other the php file

.hotspot {
position: absolute; 
}
.hotspot + * {
pointer-events: none;
opacity: 0;
}
.hotspot:hover + * {
opacity: 1;
}
.wash {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.6);
}


<div style="position: relative; height: 1px; width: 1px;">
<img src="photo.jpg" width=900px>
   <div class="hotspot" style="top: 195px; left: 277px; height: 50px; width: 50px;"> 
   </div>
<div>
    <div class="wash"></div>
   <div style="position: absolute; top: 900; left: 300px;font-size:35px;">
   Name1
   </div>
</div>

<div class="hotspot" style="top: 202px; left: 337px; height: 50px; width: 50px;">. 
</div>
<div>
    <div class="wash"></div>
   <div style="position: absolute; top: 900; left: 300px;font-size:35px;">
Name2 </div>
</div>

Solution

Here is a nice starter for you to play with.

console.clear();

data = {
  Isabelle: {
    left: 100,
    top: 23,
    width: 172,
    height: 142
  },
  Clara: {
    left: 284,
    top: 38,
    width: 121,
    height: 191
  },
  Sylvie: {
    left: 412,
    top: 9,
    width: 121,
    height: 191
  },
  Steeve: {
    left: 498,
    top: 79,
    width: 208,
    height: 191
  },
  Jacques: {
    left: 56,
    top: 179,
    width: 157,
    height: 191
  },
  Julie: {
    left: 213,
    top: 178,
    width: 106,
    height: 178
  },
  Amélie: {
    left: 300,
    top: 319,
    width: 139,
    height: 211
  },
  Robert: {
    left: 456,
    top: 282,
    width: 182,
    height: 229
  }
};

// Positions the zones with their event handler setted
let names = Object.keys(data);
names.forEach((n) => {
  let zone = $("<div>");
  zone
    .addClass("imageMapZone")
    .css(data[n])
    .hover(
      function () {
        $(".namezone").text(n);
      },
      function () {
        $(".namezone").text("");
      }
    );
  $(".imageMapContainer").append(zone);
});

.imageMapContainer{
  position: relative;
}
.imageMapZone{
  position: absolute;
}
.namezone{
  Font-size: 1.4em;
  min-height: 1.6em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageMapContainer">
  <img src="https://www.quickanddirtytips.com/sites/default/files/styles/convert_webp_article_main_image/public/images/2332/people-persons-peoples.jpg?itok=wE8o-yua">
</div>
<div class="namezone"></div>