const map = document.getElementById('food-forest-map');
if (map) {
const locations = document.querySelectorAll('.tree');
const OFFSET = { x: 12, y: 12 }; // distance from cursor
locations.forEach(el => {
el.addEventListener('mouseenter', (e) => {
const id = el.dataset.tooltip;
const box = document.getElementById(`tooltip-${id}`);
if (!box) return;
positionBox(box, e);
box.style.display = 'block';
// Update position as mouse moves across the element
el.addEventListener('mousemove', onMove);
function onMove(e) { positionBox(box, e); }
el.addEventListener('mouseleave', () => {
box.style.display = 'none';
el.removeEventListener('mousemove', onMove);
}, { once: true });
});
});
function positionBox(box, e) {
let x = e.clientX + OFFSET.x;
let y = e.clientY + OFFSET.y;
// Prevent overflow off the right/bottom edge
const rect = box.getBoundingClientRect();
if (x + rect.width > window.innerWidth) x = e.clientX - rect.width - OFFSET.x;
if (y + rect.height > window.innerHeight) y = e.clientY - rect.height - OFFSET.y;
box.style.left = x + 'px';
box.style.top = y + 'px';
}
} else {
console.log('not a map page');
}
