Popup certain points of image to display text

Solution 1:

You can use a <map> with multiple <area> elements to create the clickable regions and listen for click events on them.

Then, you need to prevent default calling Event.preventDefault() and handle that in whatever way you want, such as opening a popup or overlay on top of the map.

Here's a simple example where you can click the US:

document.getElementById('mapMap').onclick = (e) => {
    e.preventDefault();
    
    if (e.target.dataset.country === 'US') {
      alert('Hi!');
    }
};

body {
  margin: 0;
}

#mapImage {
  max-width: 420px;
}

<img id="mapImage" src="https://i.stack.imgur.com/C2Mha.png" usemap="#map">

<map id="mapMap" name="map">
  <area data-country="US" shape="poly" coords="54,70,119,68,96,94,59,86,54,79" href="#">
</map>

The main issue with this approach is that the <area> coordinates are defined in CSS pixels, so you will need to use JavaScript to recalculate the coordinates based on the size of the image, unless it always has the same size.

David Thomas provided an implementation of that here: Is possible create map html area in percentage?

Then, another limitation is that you can't apply hover styles on the <area> elements, but again, you could use JavaScript to draw the shape of the <area>, using its shape and coords attributes on a <canvas> and overlay that over the map with pointer-events: none to prevent it from getting MouseEvents (click, hover...) that should go to the <area>.

enhzflep provided an implementation of the here too: How to apply Hovering on html area tag?

Another alternative could be to use an <svg> instead of an <img>, which can handle all that nicely and easily.

Solution 2:

You can use mapael It's an open source jQuery plugin offers exactly what you're asking for.

Check this demo and here is more examples

And check here for Github source code.