JSFiddle - React, Tailwind, and code Playground

by NinjaSystems

HTML

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <div class="scheme-wrap">
        <img src="/images/plan.png" alt="" class="scheme-wrap__img">
        <svg class="scheme-wrap__svg">
            <polygon data-id="1" class="plasma" points="107.77953,1614.93701 443.1181,1614.93701 443.1181,1635.06299 455.87402,1635.06299
			455.87402,1643.56689 443.1181,1643.56689 442.83466,1663.12598 107.77953,1663.12598"></polygon>

            <polygon data-id="2" class="plasma" points="490.74014,1614.93701 826.07874,1614.93701 826.07874,1663.12598 490.74014,1663.12598
			490.74014,1643 472.31497,1643 472.31497,1635.06299 490.74014,1635.06299"></polygon>

            <polygon data-id="3" class="plasma" points="475.43307,1752.13391 811.05511,1752.13391 811.05511,1801.45667 475.43307,1801.45667
			475.43307,1783.59839 467.49606,1783.59839 467.49606,1770.27563 475.1496,1770.27563"></polygon>

            <polygon data-id="4" class="plasma" points="394.64566,1866.08667 731.1181,1866.08667 731.1181,1914.55908 394.64566,1914.55908
			394.64566,1897.83459 385.5748,1897.83459 385.5748,1883.09448 394.07874,1883.09448"></polygon>

        </svg>

        <div class="scheme-wrap__item" data-id="1" style="bottom:530px; left: 205px;">
            <div class="scheme-wrap__popup">
                <h2 class="scheme-wrap__title">Плазменная резка стол №1</h2>
                <p class="scheme-wrap__text">Тестовое описание внутри и прочее прочее</p>
            </div>
       ...

CSS

.scheme-wrap{
    margin: 0;
    width: 2792px;
    height: 2102px;
    position: relative;
}
.scheme-wrap__svg{
    position: absolute;
    top: 47px;
    left: 98px;
    width: 2792px;
    height: 2102px;
}
.scheme-wrap__svg polygon{
    cursor: pointer;
}
.scheme-wrap__item{
    position: absolute;
    cursor: pointer;
}
.scheme-wrap__popup{
    display: none;
    width: 335px;
    position: absolute;
    top: 0;
    left: 0;
    background: lightblue;
    padding: 10px;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.scheme-wrap__title{
    font-size: 18px;
    font-weight: 600;
}
.scheme-wrap__text{
    font-size: 14px;
}



.plasma{
    fill: rgb(104, 180, 46);
    fill-opacity: .7;
}
.tdf{
    fill: rgb(205, 204, 1);
    fill-opacity: .7;
}

.scheme-wrap polygon:hover, #hover {
    fill: #ffc70b;
}

.scheme-wrap polygon.active {
    fill: #FF8C0B !important;
}

JavaScript

// Open polygon click
$('.scheme-wrap polygon').click(function(){
    $(this).find('.scheme-wrap__popup').show();
});