JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://blahblahblah" alt="HTML Map" 
    border="0" usemap="#image" class="map" title="html map"/>

<map name="image">


<area shape="rect" coords="19, 138, 177, 161" title="Popup Message" />
<area shape="rect" coords="19, 178, 314, 192" title="Another Popup Message" />
<area shape="rect" coords="23, 203, 304, 217" title="A Third Popup Message" />

</map>

<label for="userid">Your userid:</label><input id="userid" title="This Popup Message Appears in the Right Place">

JavaScript

$(function() {
$( document ).tooltip({ position: { my: "right center", at: "right center" } });
});