JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://placehold.it/300" alt="" usemap="#map">
<map id="map" name="map">
    <area shape="rect" coords="0,0,50,50" href="#t_1" alt="Tip 1" data-left="80px" data-top="80px" />
        <area shape="rect" coords="100,100,150,150" href="#t_2" alt="Tip 2" data-left="180px" data-top="180px" />
</map>
        
<div class="t" id="t_1">Tooltip 1</div>
<div class="t" id="t_2">Tooltip 2</div>

CSS

.t {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.4s linear;
}

.t.active {
    opacity: 1;
}

JavaScript

var areas = document.getElementById('map').children;

for (var i = 0; i < areas.length; i++) {
    areas[i].onmouseover = function() {
        var t = document.getElementById(this.hash.substr(1));
        t.style.left = this.dataset.left;
        t.style.top = this.dataset.top;
        t.classList.toggle('active');
    }
    areas[i].onmouseout = function() {
        var t = document.getElementById(this.hash.substr(1));
        t.classList.toggle('active');
    }
}