I've been trying to set up a tooltip that displays a png image when I hover over a section of a CSS map. Unfortunately, my attempts thus far have been unsuccessful.
Every time I try to insert the image, it either causes the tooltip to disappear entirely, display as "undefined," or fail to find the image I'm attempting to include.
document.addEventListener('mouseover', function (e) {
if (e.target.tagName == 'path') {
var content = e.target.dataset.name;
mapDetails.innerHTML = content;
mapDetails.innerHTML = `<img src="image.png" alt="text for image"/>`
mapDetails.style.opacity = "100%";
}
else {
mapDetails.style.opacity = "0%";
}
});