JSFiddle - React, Tailwind, and code Playground

HTML

<div class="map__svg">

<svg data-name="Interactive map" class="interactiveMap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 601 401">
				    <path class="region" data-region-title="title 1" data-region-id="0" d="M28.66557,153.43886l2.16948,1.827-.44769.89543-1.72178.06879-.20606,1.72274,3.8217,4.99543,1.27457-1.06713,2.16924.06827,1.06726,2.72231,1.37646,2.72107h3.16913l.99856,1.82621.4476-.93049,2.54889,1.55124,2.16933.55048,1.78982-.20671,1.99684,1.82659,1.54938,2.89477,2.61693.82559.998-.99791.99947.344-.5512,2.653.99923,1.51575.17207,1.48111,2.10034-.10281.9987,1.06765-1.27523,2.27416.3798.99929,1.3418.17127.72389-1.79072,1.34332.345,1.99684.2067,1.10155-1.37873.89581.55114-.34447,1.17122.89477,1.00019-.99828,1.89362.62052.723.27439,2.72307,3.82227,2.101.621-1.27355-.3458-1.55057,2.5149.44719-.62143,1.99881,1.17158.37812.89615.06946,1.54791,1.99829.379,3.10057,1.89423,1.62017-2.82285,2.99633,4.54421,4.7548-1.44507,1.99772-.27629,2.34339c-2.27327,1.101-2.54723,1.20557-2.54723,1.20557l-2.51452-1.37792-1.825,2.447-1.54872.72293L69.78,214.11228l-1.65346-2.27459-1.61837.7243-3.16685-1.34352-1.99764-.8972-3.06415-.2077-1.82634,1.1049-3.16709-2.72207-2.82395-.17193-2.892-1.82622-2.61665-.17193-2.27327,1.89324-4.33762-2.96222-1.1712-2.34243-.72284-2.17007L34.7275,202.364l-1.3786-2.27446-1.79025.93-1.3775,2.44581-1.618,1.34453-1.99741.44743L24.67228,203.982l-.827,1.89643h-1.6177l-.827-.79305.10313-1.82483,1.9975-1.966L22.847,199.366l-.99856-.724.48221-1.06808-1.37684-.82692-1.06826.82692-1.2748-.44757-2.37492.96556-2.06663-1.24067-.72351-1.27412-.10161-3.10176-.99951-1.72293-1.44587-.44781-2.99644-.51722-1.06741-1.3775-.65314-3.72132-1.447-1.06774-1.51556-1.82569-1.72068-1.89524L.5,178.3496l1.27363-4.16874.99936-3.16965,2.44416-1.55109,1.17136-1.51589,3.96011-1.82578.10256-2.1706,1.34332-2.34338.27505-2.652,1.10183-2.23977,1.619-2.5489,1.1014-.82788,2.06568-1.51575.72284-3.27279,1.274-.10319,2.54823,2.99752,3.44447-.17259.79045,1.72231,1.92809.44748Z"/>
				   ...

CSS

.map {
	padding-top: 30px;
}

.map__title {
	font-size: 42px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.map__text {
	font-size: 22px;
	line-height: 1.4;
	color: #333;
	max-width: 950px;
	margin-bottom: 50px;
}

.map__svg {
	max-width: 900px;
	margin: 0 auto;
}

.map__svg .region {
	fill: #ecedf2;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	cursor: pointer;
}

.map__svg .region:hover, .map__svg .region.active {
	fill: #ff8f1c;
}

.ttip {
  	position: fixed;
	margin-top: 25px;
	pointer-events: none;
	color: #fff;
	padding: 5px 10px;
	line-height: .8;
	white-space: nowrap;
	background: #000;
	border-radius: 4px;
	z-index: 10;
	transform: translate(-50%, 0);


}

JavaScript

$(document).ready(function() {

  $('.interactiveMap').each(function() {
    var $map = $(this),
      $regions = $map.find('.region').not('[disabled]');

		const regions = document.querySelectorAll('.region:not(.active)');
    const allowedRegionsCount = Array.from(regions).length;

    $map.on('reset', function() {
      $regions.filter('.active').removeClass('active');
    });
    
    function highlightRandomRegion() {
				$regions.filter('.active').removeClass('active');
    		const activeRegionIndex = Math.floor(Math.random() * (allowedRegionsCount));
        regions[activeRegionIndex].classList.add('active');
    }
    
    setInterval(() => {
    		highlightRandomRegion();
    }, 1000);

    $regions.each(function() {
      var $region = $(this),
        title = $region.data('region-title'),
        id = $region.data('region-id'),
        $ttip = $('<div />', {
          class: 'ttip',
          text: title
        });
        
      

      $region.on('mouseenter', function() {
        $('body').append($ttip);
        $regions.filter('.active').removeClass('active');
      }).on('mousemove', function(event) {
        $ttip.css({
          top: event.clientY + 'px',
          left: event.clientX + 'px'
        });
      }).on('mouseleave', function() {
        $ttip.remove();
      }).on('click', function(event) {
        event.preventDefault();
        $region.addClass('active');
        // $ttip.remove();

        $map.trigger({
          type: 'regionCliked',
          regionId: title,
          regionTitle: title
        });
      });

      $(window).scroll(function() {
        $ttip.remove();
      })
    });
  });

});