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" 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
                                 c-0.80109,1.41846-3.08041,2.21756-4.5105,2.42108c-0.4473,0.06378-0.91586,0.37305-1.3266,0.39798
      ...

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');

// 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() {
  	var sel = this,
    		// get the borders of the path - see this question: http://stackoverflow.com/q/10643426/863110
    		pos = sel.getBoundingClientRect()
  	
    tooltip.style.display = 'block';
    tooltip.style.top = pos.top + 'px';
    tooltip.style.left = pos.left + 'px';
  });
  
  // when mouse leave hide the tooltip
  item.addEventListener('mouseleave', function(){
  	tooltip.style.display = 'none';
  });
});