document.querySelectorAll('.tooltip_block').forEach((item, index, all) => { // у всех с классом tooltip_block
let numId = item.id.slice(0, -8);
let numI = ".master_plan_map polygon[id*='" + numId + "'], .master_plan_map path[id*='" + numId + "']";
let areaI = document.querySelector(numI); // area с id, часть которого совпадает с id tooltip
const areaW = item.offsetWidth; // ширина tooltip
areaI.addEventListener('focus', function(e) {
item.style.visibility = "visible";
})
areaI.addEventListener('pointerenter', function(e) { // наведен на tooltip
e.target.focus();
})
areaI.addEventListener('blur', function(e) {
item.style.visibility = "";
})
areaI.addEventListener('mouseleave', function(e) {
e.target.blur();
})
areaI.addEventListener('pointermove', function(e) { // движение мышкой в рамках tooltip
let WID = document.documentElement.clientWidth; // ширина окна браузера
let HEI = document.documentElement.clientHeight;
let x = 0;
if ((e.clientX + 15 + areaW) > WID) {
if ((e.clientX - areaW) > 0) {
x = e.clientX - 15 - areaW;
} else {
if (areaW < WID) {
x = WID - areaW;
} else {
x = WID - item.offsetWidth;
}
}
} else {
x = e.clientX + 15;
}
let y = ((e.clientY + 15 + item.offsetHeight) > HEI) ? (e.clientY - 15 - item.offsetHeight) : (e.clientY + 15);
item.style.top = y + "px";
item.style.left = x + "px";
});
})