let info = document.querySelector(".info");
let svg = document.querySelector("#svg-map");
/***/
// Текстовое значение / видимость определяется только один раз, на входе-выходе
// Пусть mousemove меняет только координаты.
let path = svg.querySelectorAll("path");
for (let i = 0; i < path.length; i++) {
path[i].addEventListener("mouseenter", show_info);
path[i].addEventListener("mouseleave", hide_info);
}
function show_info() {
info.textContent = this.getAttribute("title");
info.style.display = "block";
}
function hide_info() {
info.style.display = "none";
}
/***/
const INFO_WID = info.offsetWidth;
const X_MAX = window.innerWidth - INFO_WID - 20;
const X_MIN = 10;
svg.addEventListener("mousemove", function(e) {
const Y_MAX = window.innerHeight - info.offsetHeight - 5;
// Определяется тут, т.к. высота info может меняться (многострочный текст)
let x = Math.max(X_MIN, Math.min(X_MAX, e.pageX - INFO_WID / 2)); // (*1)
let y = e.pageY + (e.pageY + 20 < Y_MAX ? (20) : (-info.offsetHeight - 20)); // (*2)
info.style.left = x + "px";
info.style.top = y + "px";
});
path {
fill: #f80;
}
.info {
position: absolute;
text-align: center;
width: 200px;
background: white;
box-shadow: 1px 1px 5px #000000;
}
<svg id="svg-map" width="100%" height="180">
<path title="111" d="M 0,10 0,180 80,180 80,10"></path>
<path title="222" d="M 100,10 100,180 180,180 180,10"></path>
<path title="333" d="M 200,10 200,180 280,180 280,10"></path>
<path title="444" d="M 300,10 300,180 380,180 380,10"></path>
<path title="555" d="M 400,10 400,180 480,180 480,10"></path>
<path title="666" d="M 500,10 500,180 580,180 580,10"></path>
<path title="777" d="M 600,10 600,180 680,180 680,10"></path>
</svg>
<div class="info"></div>
info.style.left = e.clientX - 310 + "px";
- вроде, как на картинке. Только короткие строчки в одну строку, но например ХМАО и ЯНАО с переносом.