JSFiddle - React, Tailwind, and code Playground

by Shrikrishna Gupta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.7/js/imageMapResizer.min.js"></script>
<img src="https://i.paste.pics/c12eb9a681af68d0bcab2af25d09f5ab.png" usemap="#image-map">

<map name="image-map">
    <area coords="7,2,118,3,118,121,3,123" shape="poly">
    <area coords="136,4,135,117,250,123,251,10" shape="poly">
    <area coords="4,136,125,136,125,253,4,253" shape="poly">
    <area coords="136,138,256,137,256,252,134,254" shape="poly">
</map>

<!-- Popups -->

<div class="msg one" role="tooltip">
  <div class="msg-arrow"></div>
  <div class="msg-inner">
    Content 1
  </div>
</div>

<div class="msg two" role="tooltip">
  <div class="msg-arrow"></div>
  <div class="msg-inner">
    Content 2
  </div>
</div>

<div class="msg three" role="tooltip">
  <div class="msg-arrow"></div>
  <div class="msg-inner">
    Content 3
  </div>
</div>

<div class="msg four" role="tooltip">
  <div class="msg-arrow"></div>
  <div class="msg-inner">
    Content 4
  </div>
</div>

<div class="popup"></div>

CSS

.msg {
  width: 200px;
  position: absolute;
  z-index: 1070;
  filter: alpha(opacity=0);
  opacity: 0;
  line-break: auto;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.msg.in {
  opacity: 1;
  filter: alpha(opacity=1);
}

.msg .msg-arrow {
  position: absolute;
  top: 7%;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-right: 7px solid #fff;
}

.msg-inner {
  padding: 6px 10px;
  color: #252525;
  background-color: #fff;
}

JavaScript

$('map').imageMapResize();
createHover();

function createHover() {
  $('area').each(function(i) {
    $('area').eq(i).bind('mouseover mousemove', function(e) {
      $('.one,.two,.three,.four').eq(i).css({
        "top": e.pageY - $('.popup').offset().top + 300,
        "left": e.pageX - $('.popup').offset().left - 100
      }).addClass('in');
    })
    $('area').eq(i).bind('mouseout', function() {
      $('.one,.two,.three,.four').removeClass('in');
    });
  });
}

//On resize, wait and reload function
var it;

window.onresize = function() {
  clearTimeout(it);
  it = setTimeout(function() {
    createHover();
  }, 200);
};