JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#Map">

<map name="Map" id="Map">
  <div class="hover"><area shape="rect" coords="0,0,82,126" class="tooltip1" alt="Sun" href="#"></div>
  <div class="hover"><area shape="circle" coords="90,58,3" class="tooltip2" alt="Mercury" href="#"></div>
  <div class="hover"><area shape="circle" coords="124,58,8" class="tooltip3" alt="Venus" href="#"></div>
</map>

</body>

CSS

.tooltip1{
    display:none;
    position:absolute;
    top:20px;
    left:250px;
    width:99px;
    height:98px;
    background-image:url(http://www.w3schools.com/images/sun.gif);
    text-indent: -99999px;}

.hover:hover .tooltip1{
    display:block;}

.tooltip2{
    display:none;
    position:absolute;
    top:20px;
    left:250px;
    width:100px;
    height:100px;
    background-image:url(http://www.w3schools.com/tags/merglobe.gif);
    text-indent: -99999px;}

.hover:hover .tooltip2{
    display:block;}

.tooltip3{
    display:none;
    position:absolute;
    top:20px;
    left:250px;
    width:100px;
    height:100px;
    background-image:url(http://www.w3schools.com/images/venglobe.gif);
    text-indent: -99999px;}

.hover:hover .tooltip3{
    display:block;}