JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
a span
{
position: absolute;
text-align: justify;
color: #FFFFFF;
background-color: #858585;
padding: 15px;
box-shadow: 0 0 2px #000000;
transform: scale(0) rotate (-12deg);
transition: all .25s;
opacity: 0;
}
a:hover span, a:focus span
{
transform: scale(1) rotate(0);
opacity: 1;
background: #858585;
box-shadow: 0 1px 0 #FFFFFF;
}
#myTooltips{
position: absolute;
z-index:10;
background-color: #FFF;
border-radius: 5px;
box-shadow: 0px 0px 3px 3px #444;
padding: 20px;
font-size: 20px;
opacity:0;
}
#myTooltips:hover{
opacity:1;
}
</style>
</head>
<body>
<!--
<img src="ciel_astral_carre.jpg" width="624" height="600" rel="lightbox" usemap="#ciel_astral_carre"/>
<span id="#1"> blabla... commentaire sur l'image ou la zone mappée </span>
<map name="ciel_astral_carre">
<area shape="rect" coords="205,253,397,436" href="#1" span class="hover" span class="focus" />
</map>
-->
<br />
<br />
<br />
<br />
<br />
<img id="imageMapper" src="http://img15.hostingpics.net/pics/220063cielastralcarre.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area id="area1" alt="" onmousemove="myFunction(this)" data-tooltip="info bule 1" href="#" shape="poly" coords="210,259,207,433,398,436,392,258" />
<area id="area2" alt="" onmousemove="myFunction(this)" data-tooltip="info bule 2" href="#" shape="poly" coords="201,241,404,240,301,134" />
<area id="area3" alt="" onmousemove="myFunction(this)" data-tooltip="info bule 3" href="#" shape="poly" coords="192,231,292,133,93,133" />
<area id="area4" alt="" onmousemove="myFunction(this)" data-tooltip="info bule 4" href="#" shape="poly" coords="90,341,190,237,86,133" />
<area id="area5" alt="" onmousemove="myFunction(this)" data-tooltip="info bule 5" href="#" shape="poly" coords="192,244,190,444,94,348" />
<area id="area6" alt="" onmousemove="myFunction(this)" data-tooltip="info bule 6" href="#"...