JSFiddle - React, Tailwind, and code Playground

by t1nk

HTML

<div class="themathic w66 column">
<img src="http://www.xiper.net/assets/images/html-tags/map.png" usemap="#mapthematic"/>
<map id="mapthematic">
<area class="allod" shape="circle" coords="70,138,39" nohref="nohref"/>
<area class="allod" shape="rect" coords="20,10,118,188" href="#"/>
<area class="allod" shape="poly" coords="175,30,270,100,200,150" href="#"/>
</map>
<div id="hint" style="visibility: visible; cursor: pointer; left: 941.6px; top: 531px">Некая подсказка</div>
</div>

CSS

#hint { 
background-color: #DDDDDD;
background-image: -o-linear-gradient(to bottom, rgba(255, 255, 255, 0.506), rgba(255, 255, 255, 0));
border: 2px solid #CCCCCC;
border-radius: 4px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.400), 0px 1px 0px rgba(255, 255, 255, 0.506) inset;
margin-left: -127px;
opacity: 0.9;
padding: 10px;
position: absolute;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.400);
visibility: hidden;
z-index: 999;
}

#hint::before { 
border-bottom: 0px none currentColor;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #CCCCCC;
bottom: -8px;
content: "";
left: 50%;
margin-left: -8px;
position: absolute;
z-index: 1000;
}

#hint::after { 
border-bottom: 0px none currentColor;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #DDDDDD;
bottom: -7px;
content: "";
left: 50%;
margin-left: -8px;
position: absolute;
z-index: 1000;
}

JavaScript

$(function() {
  $('.allod').mouseover(function(){
    $('#hint').css("visibility", "visible").css("cursor", "pointer");
  }).mouseout(function(){
    $('#hint').css("visibility", "hidden").css("cursor", "default");
  }).mousemove(function(e){
    h = e.pageY - $('#hint').height() * 3;
    w = e.pageX + $('#hint').width() / 2 + 7;
    $('#hint').css("left", w + "px").css("top", h + "px");
  });
});