JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tooltip-container">
    <div class="image" id="machine1">
        <img src="http://axevilw.sellamachine.com/EnhFiles/advert/182/Machine.jpg/Machine.jpg">
        <span class="tooltip" id="tooltip1" data-show="description1">1</span>
         <div class="description-container">
            <div class="description" id="description1">
                LED Strip Lighting
            </div>
         </div>
         </div>
         </div>

CSS

body{
    box-sizing:border-box;
    z-index: 0;
    font-family: sans-serif;
}
/*=============images*/
.image{
    position: relative;

    
    display:block;
    margin:0 auto;

}
img{
    max-width: 100%;
}
#machine2, #machine3{
    display:none;
}
svg{
    cursor: pointer;
    display: block;
    position: absolute;
    width: 10%;

    fill:#32CCFF;

}
svg:hover{
    fill:#183559;
    transition: all .3s ease-in-out;
}

 #eye1{
    top: 40%;
    left: 5%;
}

#eye2{
    top: 40%;
    left: 85%;
}
.back{
    position:absolute;
    width:15%;
    cursor: pointer;
    top:100%;
    left:-10%;
    transition: .3s all;

}
.back:hover{
    transform: scale(1.2, 1.2);
    opacity: 0.7;
    transition: .3s all;
}
/*================*/
.tooltip{
    background-color: #a0cdee;
    
    width:5%;
    height: 5%;
    display: block;
    position: absolute;
    padding:1%;
    z-index:99;
    text-align:center;

    vertical-align: middle;
    color:white;
    border-radius: 50%;
    transition: all .1s;
    box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.5);
}

.tooltip:hover{
    background-color: #183559;
    transition: all .3s ease-in-out;
    cursor:pointer;
    
    border-color: #AED4F3;
    box-shadow: none;
}

/*===========tooltip id*/
#tooltip1{
    top: 27%;
    left: 40%;
}
#tooltip2{
    top: 15%;
    left: 55%;
}
#tooltip3{
    top: 45%;
    left: 40%;
}
#tooltip4{
    top: 35%;
    left: 65%;
}
#tooltip5{
    top: 70%;
    left: 90%;
}
#tooltip6{
    top: 90%;
    left: 90%;
}
#tooltip7{
    top: 85%;
    left: 50%;
}
#tooltip8{
    top: 70%;
    left: 10%;
}
/*=================*/

#tooltip2-1{
    top:10%;
    left:25%;
}
#tooltip2-2{
    top:50%;
    left:50%;
}
#tooltip2-3{
    top:50%;
    left:30%;
}
#tooltip2-4{
    top:80%;
    left:40%;
}
#tooltip2-5{
    top:60%;
    left:0%;
}
/*============*/
#tooltip3-1{
    top:10%;
    left:10%;

}
#tooltip3-2{
    top:50%;
    left:50%;
}
#tooltip3-3{
    top:50%;
    left:10%;
}
#tooltip3-4{
    top:33%;
   ...

JavaScript

// =================tooltip animation
    // detect user device
    var screen = window.innerWidth;
    
   
    $('.tooltip').mouseover(showDescription);
    $('.tooltip').mousemove(divPosition);
    
    function showDescription(e) {
      // var to link tooltips and hand to description
      var target = $(this).attr('data-show');

      // hide current description if showing
      if ($('.description').is(':visible')) {
        $('.description').fadeOut(0);
      };
      e.stopPropagation();
      $('#' + target).fadeIn(400);
    }

    $('body').mouseover(function(event) {
      $('.description').fadeOut(0);
    });
    function divPosition (event){
      // pass mouse position to description div css
      $(".description").css({top: event.clientY, left: event.clientX- 200});
    };

    // ==========image loader

    $('.eye').click(function(e) {
         // var to link tooltips and hand to description
        var target = $(this).attr('data-show');
        // hide current image
        $('.image').fadeOut(0);
        // load new image

        e.stopPropagation();
        $('#' + target).fadeIn(400);
    }) /
    // ===========back button
    $('.back').click(function(e) {
        $('.image').fadeOut(0);
        $('#machine1').fadeIn(400);
    })