Это не работает на мобильных устройствах, поскольку на номер невозможно навести курсор.
Мне интересно, как мне сделать так, чтобы информационная карточка появлялась при нажатии на номер, а затем скрывалась при втором нажатии?
Или есть лучший способ получить это было бы здорово работать как на компьютере, так и на мобильных устройствах?
Я так и сделал поиск, но не могу найти ничего похожего на JavaScript, который я использую. Я вообще не знаком с Java-скриптом, но научился работать с другими примерами.
Проверил сообщение - Jquery показывает при наведении курсора, скрывается при клике -
Это ссылка на карту
https://illomaps.net/comox_hotlist.html
Код: Выделить всё
let paths = document.querySelectorAll("path");
let cardWidth = card.getBoundingClientRect().width;
let cardHeight = card.getBoundingClientRect().height;
paths.forEach((p) => {
p.addEventListener("mouseleave", (evt) => {
card.style.visibility = "hidden";
});
p.addEventListener("mousemove", (evt) => {
let pos = oMousePos(svg, evt);
let text = p.dataset.text;
card.style.visibility = "visible";
card.style.top = pos.y + "px";
card.style.left = pos.x + "px";
card.innerHTML = text;
});
});
function oMousePos(element, evt) {
let ClientRect = element.getBoundingClientRect();
let currentX = Math.round(evt.clientX - ClientRect.left);
let currentY = Math.round(evt.clientY - ClientRect.top);
//close to right
if (evt.clientX + cardWidth >= ClientRect.right) {
currentX = Math.round(evt.clientX - ClientRect.left - cardWidth);
}
//close to bottom
if (evt.clientY + cardHeight>= ClientRect.bottom) {
currentY = Math.round(evt.clientY - ClientRect.top - cardHeight);
}
return {
x: currentX,
y: currentY
};
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... lick-for-m
Мобильная версия