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('mouseenter', function(e) { // наведен на tooltip item.style.visibility = "visible"; }) areaI.addEventListener('mouseleave', function(e) { // убран с tooltip if (!item.classList.contains('tooltip_active')) { item.style.visibility = ""; } }) areaI.addEventListener('click', function(e) { // нажатие на tooltip item.classList.toggle('tooltip_active'); }) document.addEventListener('click', function(e) { // нажатие вне tooltip if (!areaI.contains(e.target) && !item.contains(e.target)) { item.classList.remove('tooltip_active'); item.style.visibility = ""; } }) areaI.addEventListener('mousemove', function(e) { // движение мышкой в рамках tooltip let WID = window.innerWidth; // ширина видимой области окна браузера let HEI = window.innerHeight; // высота видимой области окна браузера let x = e.clientX - (areaW / 2); // изменение этой строки if (x < 0) { x = 0; } else if (x + areaW > WID) { x = WID - areaW; } let y = ((e.clientY + 10 + item.offsetHeight) > HEI) ? (e.clientY - 5 - item.offsetHeight) : (e.clientY + 10); item.style.top = y + "px"; item.style.left = x + "px"; }); areaI.addEventListener('touchstart', function(e) { // начало касания на tooltip item.classList.add('tooltip_active'); }) document.addEventListener('touchstart', function(e) { // касание вне tooltip if (!areaI.contains(e.target) && !item.contains(e.target)) { item.classList.remove('tooltip_active'); item.style.visibility = ""; } }) areaI.addEventListener('touchmove', function(e) { // движение пальцем в рамках tooltip let WID = window.innerWidth; // ширина видимой области окна браузера let HEI = window.innerHeight; // высота видимой области окна браузера let x = e.touches[0].clientX - (areaW / 2); // изменение этой строки if (x < 0) { x = 0; } else if (x + areaW > WID) { x = WID - areaW; } let y = ((e.touches[0].clientY + 10 + item.offsetHeight) > HEI) ? (e.touches[0].clientY - 5 - item.offsetHeight) : (e.touches[0].clientY + 10); item.style.top = y + "px"; item.style.left = x + "px"; }); }); window.addEventListener('resize', function() { document.querySelectorAll('.tooltip_block').forEach((item) => { item.style.maxWidth = "520px"; item.style.minWidth = "280px"; }); }); 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('pointerenter', function(e) { // наведен на tooltip item.style.visibility = "visible"; }) areaI.addEventListener('pointerleave', function(e) { // убран с tooltip item.style.visibility = ""; }) 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"; }); }) .modal_form_window{ position: fixed; top: 0; bottom: 0; right: 0; left: 0; width: 100vw; height: 100vh; display: flex; display: none; justify-content: center; align-items: center; background-color: rgba(256,256,256, .8); background-color: rgba(183,201,226, .9); } document.querySelectorAll('.tooltip_block').forEach((item, index, all) => { // у всех с классом tooltip_block let numId = item.id.slice(0, -8); let numI = ".master_plan_map area[id*='" + numId + "']"; let areaI = document.querySelector(numI); // area с id, часть которого совпадает с id tooltip const areaW = item.offsetWidth; // ширина tooltip areaI.addEventListener('pointerenter', function(e) { // наведен на tooltip item.style.visibility = "visible"; }) areaI.addEventListener('pointerleave', function(e) { // убран с tooltip item.style.visibility = ""; }) 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"; }); }) https://ru.stackoverflow.com/questions/1180787/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B2%D0%B5%D1%81%D1%82%D0%B8-%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D1%83-tooltip-%D1%80%D1%8F%D0%B4%D0%BE%D0%BC-%D1%81-%D0%BA%D1%83%D1%80%D1%81%D0%BE%D1%80%D0%BE%D0%BC-%D0%BD%D0%B0-js