Нашел способ сделать всплывающую подсказку через title.
Но это не то что нужно. Нужно что бы полноценный div всплывал блок это вообще возможно?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/imagemapster@1.5.4/dist/jquery.imagemapster.min.js"></script>
<style>
.box{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<img src="https://rakipov.ru/files/sample2.jpg" usemap="#61160930693a6" alt="">
</div>
<map name="61160930693a6">
<area shape="poly" href="kvadrat_1" title="это цветной квадрат 1" coords="407,500,407,593,500,593,593,593,593,500,593,407,500,407,407,407" target="_blank">
<area shape="poly" href="kvadrat_2" title="это цветной квадрат 2" coords="207,500,207,593,300,593,393,593,393,500,393,407,300,407,207,407">
<area shape="poly" href="kvadrat_3" title="это цветной квадрат 5" coords="7,500,7,593,100,593,193,593,193,500,193,407,100,407,7,407">
<area shape="poly" href="kvadrat_4" title="это цветной квадрат 4" coords="407,302,407,395,500,395,593,395,593,302,593,209,500,209,407,209">
<area shape="poly" href="kvadrat_5" title="это цветной квадрат 5" coords="7,302,7,395,100,395,193,395,193,302,193,209,100,209,7,209">
<area shape="poly" href="kvadrat_6" title="это цветной квадрат 6" coords="207,300,207,393,300,393,393,393,393,300,393,207,300,207,207,207">
<area shape="poly" href="kvadrat_7" title="это цветной квадрат 7" coords="407,100,407,193,500,193,593,193,593,100,593,7,500,7,407,7">
<area shape="poly" href="kvadrat_8" title="это цветной квадрат 8" coords="207,100,207,193,300,193,393,193,393,100,393,7,300,7,207,7">
<area shape="poly" href="kvadrat_9" title="это цветной квадрат 9" coords="7,100,7,193,100,193,193,193,193,100,193,7,100,7,7,7">
</map>
<script src="https://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.js"></script>
<script>
$("img[usemap]").mapster({
scaleMap: true,
fill: true,
fillColor: '2CA7DC',
fillOpacity: 0.75,
showToolTip: true,
mapKey: 'id',
areas: [
{
key: "kvadrat_1",
toolTip: $("#kvadrat_1").attr('title')
},
{
key: "kvadrat_2",
toolTip: $("#kvadrat_2").attr('title')
},
{
key: "kvadrat_3",
toolTip: $("#kvadrat_3").attr('title')
},
{
key: "kvadrat_4",
toolTip: $("#kvadrat_4").attr('title')
},
{
key: "kvadrat_5",
toolTip: $("#kvadrat_5").attr('title')
},
{
key: "kvadrat_5",
toolTip: $("#kvadrat_6").attr('title')
},
{
key: "kvadrat_7",
toolTip: $("#kvadrat_7").attr('title')
},
{
key: "kvadrat_8",
toolTip: $("#kvadrat_8").attr('title')
},
{
key: "kvadrat_9",
toolTip: $("#kvadrat_9").attr('title')
},
]
});
</script>
</body>
</html>