JSFiddle - React, Tailwind, and code Playground

HTML

<img id="Image-Maps-Com-image-maps" class="img-responsive map-empty" src="https://www.maloufsleep.com/assets/img/map-empty.png" border="0" usemap="#image-maps" style="z-index: 900;"/>
		<map name="image-maps" id="ImageMapsCom-image-maps">
			<area id="point-port" shape="poly" coords="100,513,149,541,86,652,53,650,56,593" />
			<area id="point-italy" shape="poly" coords="465,473,571,450,603,478,572,491,714,645,662,707,628,755,633,754,619,756,567,732"/>
			<area id="point-aust" shape="poly" coords="664,394,622,386,563,426,592,457,661,450"/>
			<area id="point-france" shape="poly" coords="248,347,401,312,483,399,458,434,442,450,458,476,454,502,467,524,440,546,392,543,365,552,320,545,289,534,271,515,298,433"/>
		</map>
		<img src="https://www.maloufsleep.com/assets/img/Map-France.png" class="img-responsive maps map-france" style="position: absolute; display: none;"/>

CSS

body {

}

JavaScript

$(document).ready(function() {

  $('#point-france').hover(function() {
      $('.map-france').show();
      $('.map-france').css({'top' : $('.map-empty').position().top, 'left' : $('.map-empty').position().left, 'z-index': '1' });
    },function() {
      $('.map-france').hide();
    });

});