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>
