Show on hover javascript working great but how do I add or change to click for mobile?

Question

I have a map where a user can mouse over a number on the map and have an info card pop up. Then when they click on the number it links to the card infos website.

This doesnt work on mobile because there is no way to hover over the number.

I'm wondering how i can get the info card to pop up on clicking the number and then hide on clicking a second time?

Or if theres a better way to get this function on both desktop and mobile that would be awesome?

I did a search but cant find anything similiar to the JavaScript Im using. I am not familiar with JavaScript at all but got it working from other samples.

Checked the post - Jquery show on hover hide on click -

This is the link to the map
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
  };
}