I recently implemented a map with interactive cards that appear when hovering over hotspots, all thanks to the amazing support I received on this platform. However, I have encountered a problem where the card appears to the right of the hotspot and gets cut off when the hotspot is near the right edge of the browser window. The setup involves a combination of CSS and JavaScript, with my expertise leaning more towards CSS than JavaScript.
I've tried adjusting the CSS positioning, but it didn't solve the issue. I suspect that there might be a need to modify something in the JavaScript code instead?
You can experience the problem on the webpage by hovering over number 35 or 36.
Here is the snippet of CSS code:
#card {
position: relative;
left: 30px;
width: 300px;
height: 150px;
display: none;
border: none;
background: #ffd;
pointer-events: none;
}
And here is the corresponding JavaScript code:
let paths = document.querySelectorAll("path");
paths.forEach((p) => {
p.addEventListener("mouseleave", (evt) => {
card.style.display = "none";
});
p.addEventListener("mousemove", (evt) => {
let pos = oMousePos(svg, evt);
let text = p.dataset.text;
card.style.display = "block";
card.style.top = pos.y + "px";
card.style.left = pos.x + "px";
card.innerHTML = text;
});
});
function oMousePos(element, evt) {
let ClientRect = element.getBoundingClientRect();
return {
//object
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
};
}