Javascript-форум - Следование HTML-объекта за курсором

XamMax,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/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);
  transition: .3s;
  transform: scale(0);
}
body {
    position: relative;
}
.hov{
    margin-top: 300px;
}

</style>

<script>
    window.onload=function(){
      const tooltip = document.querySelector('.tooltip');
      [...document.querySelectorAll( '.hov' )].forEach(  el => {
      el.addEventListener( 'mousemove', ({target, clientX, clientY})=> {
        const {top,left} = el.getBoundingClientRect();
   	  if(target.closest('path')){
        tooltip.innerHTML = target.getAttribute('title');
        tooltip.style.transform = 'scale(1)'
        tooltip.style.top = (clientY - top)+'px' ;
        tooltip.style.left = (clientX - left)+'px'
   	  }
      }
       );
      el.addEventListener( 'mouseout', function() {
           tooltip.style.transform = '' ;
      } );
    } );
  }
</script>

</head>
<body>
      <div class="hov">
      <svg width="800" fill="#ccc">

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

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

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



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



</body>
</html>