JSFiddle - React, Tailwind, and code Playground

HTML

<map id="map" name="map">
            <area shape="poly" coords="48,51,222,51,223,212,49,212," href="#" id="a1" data-tooltip="t1">
            <area shape="poly" coords="228,101,478,104,479,289,227,290," href="#" id="a2" data-tooltip="t2">
            <area shape="poly" coords="117,218,118,429,479,431,477,293,224,292,223,218," href="#" id="a3" data-tooltip="t3">
        </map>

        <div class="image_container">
            <img src="http://magascity.ru/images/image.gif" usemap="#map" class="m1">

            <div id="t1" class="tooltip t1">
                Tooltip1
				<a href="magascity.ru">ссылка</a>
            </div>

            <div id="t2" class="tooltip t2">
                Tooltip2
            </div>

            <div id="t3" class="tooltip t3">
                Tooltip3
            </div>

        </div>

CSS

.image_container{
                position: relative;
            }

            .tooltip{
                background: #eee;
                padding:10px;
                display:none;
                float:left;
                position:absolute;
                z-index:100;
            }

            .tooltip.t1{
                top: 51px;
                left: 226px; 
            }

            .tooltip.t2{
                top: 99px;
                left: 480px; 
            }

            .tooltip.t3{
                top: 292px;
                left: 481px; 
            }

JavaScript

$(document).ready(function(){
                $("area").bind('click', function(){
                    $(document).bind('click', hideTooltip);
                    var _this = $(this);
                    $('.image_container .tooltip').hide();
                    $('#' + _this.data('tooltip')).show().bind('click', function() { return false; });
                    return false;
                }); 

                var hideTooltip = function() {
                    $('.image_container .tooltip').unbind('click');
                    $(document).unbind('click', hideTooltip);
                    $('.image_container .tooltip').hide();
                };

            })