JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
  <div class="hov">
      <svg width="800" fill="#ccc">

        <path fill="#000000" d="M172,172c-57.333,69.333-114.667,69.333-172,0V0h172V172z"/>

        <path fill="#fa0000" d="M572,172c-57.333,69.333-114.667,69.333-172,0V0h172V172z"/>

        <path fill="#fa85ef" d="M372,272c-57.333,69.333-114.667,69.333-172,0V0h172V172z"/>
    </svg>
</div>



    <div class="tooltip">Описание / Инфо</div>

CSS

/* Задаем фон SVG */
svg {
  background: #AB1;

}

/* Меняем цвет path при наведнии на него */
.hov path:hover {

  fill: #00FFA9 !important;
  stroke: none;
  stroke-width: 1px !important;
  transition: all .1s;

}


/* Стили для подсказки */
.tooltip {
  position: absolute;
  top: 200px;
  color: #000;
  border-radius: 10px;
  background: #FFDD00;
  padding: 20px;
  box-shadow: 0px 0px 23px 0px rgba(0,34,252,1);
}

JavaScript

function init() {


    var easing = mina.easeinout;

    [].slice.call ( document.querySelectorAll( '.hov' ) ).forEach( function( el ) {
      var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' );

      el.addEventListener( 'mouseover', function() {
   		  /* навели курсор на path */ 
        alert('Навел на SVG/path');
      } );

      el.addEventListener( 'mouseleave', function() {
        /* Убрали курсор из path */  
      } );
    } );
  }

  init();