feat: hover-only title tooltip on map markers; click navigates to entry

themes/intotheeast/templates/map.html.twig

@@ -91,20 +91,14 @@ map.on('load', function () {
         bounds.extend(lngLat);
 
         var el = MapUtils.createDotMarker(isLatest);
-
-        var popupHtml = '<div style="min-width:160px;max-width:200px;">';
-        if (entry.hero) {
-            popupHtml += '<img src="' + entry.hero + '" alt="" style="width:100%;height:80px;object-fit:cover;border-radius:4px;display:block;margin-bottom:8px;">';
-        }
-        popupHtml += '<div style="font-size:0.75rem;color:var(--color-ink-muted);margin-bottom:2px;">📅 ' + entry.date + '</div>';
-        popupHtml += '<div style="font-weight:600;font-size:0.9rem;margin-bottom:8px;color:var(--color-ink);">' + entry.title + '</div>';
-        popupHtml += '<a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.85rem;text-decoration:none;">Read entry →</a>';
-        popupHtml += '</div>';
-
-        new maplibregl.Marker({ element: el })
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
             .setLngLat(lngLat)
-            .setPopup(new maplibregl.Popup({ offset: 10, maxWidth: '220px' }).setHTML(popupHtml))
-            .addTo(map);
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(map); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () { window.location.href = entry.url; });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(map);
     });
 
     /* ── Journey line ────────────────────────────────────────── */