JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-494.66666 292.72443 756 495.33334" style="enable-background:new -494.66666 292.72443 756 495.33334;width:75%;height:;margin-left:auto; margin-right:auto; display:block;"
     xml:space="preserve">
  <style type="text/css">
    .HI-map{
      fill:#F3F3F3;
      stroke:#B5B5B5;
    }
    .oahu{fill:#016ea1;}
  </style>

  <path class="HI-map niihau" data-tooltip="tooltip1" d="M-490.29797,354.30963c-0.09271-0.40253-0.06238-1.64383,0.39798-1.75778
                                 c0.01813-0.05472,0.04761-0.02353,0.06631-0.09949c0.10461-0.02582,0.07486-0.11026,0.16583-0.13266
                                 c0.02127-0.06464,0.0119-0.00171,0.03317-0.06635c0.06036-0.01471,0.0723-0.05157,0.13266-0.06631
                                 c0.01898-0.07681,0.13464-0.21628,0.19901-0.23215c0-0.1409,0.19925-0.26563,0.23215-0.43115
                                 c0.28461-0.07031,0.74863-4.07056,0.8623-4.64316c1.38528-0.34329,4.23212-3.0535,4.57681-4.44415
                                 c0.06067-0.01501,0.0513-0.00568,0.06631-0.06635c0.0553-0.01358,0.11963-0.05951,0.13266-0.09949h0.06635
                                 c0.69901-2.10898,4.18253-1.39264,4.60999-3.11752c2.69037-0.38126,6.56674-3.11783,6.56674-6.30142
                                 c0.01926-0.20041,0.07767-0.7923,0.23215-0.89548c0-0.79199,1.20078-1.54855,1.32663-2.05624
                                 c0.25311-0.03574,0.40591-0.23218,0.69647-0.23218c0.07568-0.22903,1.52249,0.19901,1.75775,0.19901
                                 c1.11148,0,1.76117-0.74808,2.81906,0.06631c0.99014,0.76196,1.35977,1.0015,1.35977,2.32159l-1.29346,1.5256
                                 c-1.91565,2.25949-2.0191,5.55447-2.91855,8.25818c0.51535,1.2291,0.56894,2.12598-0.06631,3.25018
                                ...

CSS

.map-tooltip {
  position: absolute;
  display: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border:#d3d3d3 solid 1px;
  background: #fff;
  color: black;
  font-family: Comfortaa, Verdana;
  font-size: smaller;
  padding: 8px;
  pointer-events:none;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

JavaScript

var tooltip = document.querySelector('.map-tooltip');
var colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
var contents = {};
for (var i = 1; i <= 10; i++) {
contents['tooltip' + i] = 'tooltip <b style="color:' + colors[i] + '">' + i + '</b>';
}
		
// iterate throw all `path` tags
[].forEach.call(document.querySelectorAll('path.HI-map'), function(item) {
	// attach click event, you can read the URL from a attribute for example.
  item.addEventListener('click', function(){
    window.open('http://google.co.il')
  });
  
  // attach mouseenter event
  item.addEventListener('mouseenter', function() {
    tooltip.innerHTML = contents[item.getAttribute('data-tooltip')];
    tooltip.style.display = 'block';
  });
  
  item.addEventListener('mousemove', function(e) {
  	tooltip.style.top = e.clientY + 'px';
    tooltip.style.left = e.clientX + 'px';
  });
  
  // when mouse leave hide the tooltip
  item.addEventListener('mouseleave', function(){
  	tooltip.style.display = 'none';
  });
});