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 id="id_msg"></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);
}

#id_msg {
  padding-top: 10px;
}

JavaScript

function msg(str) {
   	 document.querySelector('#id_msg').innerHTML = str;
   }
   
   function init() {

		var el = document.querySelector('.hov');
    el.addEventListener('mouseover', function(e) {
    	if (e.target.tagName === 'path') {
       msg('Навел на SVG/path');
      }
       
    });
    el.addEventListener('mouseout', function(e) {
        if (e.target.tagName === 'path') {
       		msg('Убрал нахрен с SVG/path');
      	}
    });
    

  }

  init();