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

themes/intotheeast/css/style.css

@@ -437,6 +437,21 @@ body::after {
 .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
 .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
 
+/* Hover tooltip (title only, non-interactive) */
+.map-tip-popup { pointer-events: none; }
+.map-tip-popup .maplibregl-popup-content {
+    padding: var(--space-2) var(--space-3);
+}
+.map-tip {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink);
+    white-space: nowrap;
+    user-select: none;
+    display: block;
+}
+
 /* ── Stats page ──────────────────────────────────────────────────────────────── */
 
 .stats-heading {

themes/intotheeast/templates/dailies.html.twig

@@ -58,10 +58,14 @@ feedMap.on('load', function () {
         bounds.extend(lngLat);
 
         var el = MapUtils.createDotMarker(isLatest);
-        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, maxWidth: '200px' })
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
-            .setHTML('<div style="font-family:var(--font-ui);"><div style="font-size:0.72rem;color:var(--color-ink-muted);margin-bottom:2px;">' + entry.date + '</div><div style="font-weight:600;font-size:0.88rem;color:var(--color-ink);margin-bottom:6px;">' + entry.title + '</div><a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.82rem;text-decoration:none;">Read →</a></div>');
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(feedMap); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () { window.location.href = entry.url; });
 
-        new maplibregl.Marker({ element: el }).setLngLat(lngLat).setPopup(popup).addTo(feedMap);
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(feedMap);
     });
 
     MapUtils.addJourneyLine(feedMap, coords, 'feed-journey');

themes/intotheeast/templates/home.html.twig

@@ -147,10 +147,14 @@ homeMap.on('load', function () {
         bounds.extend(lngLat);
 
         var el = MapUtils.createDotMarker(isLatest);
-        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, maxWidth: '200px' })
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
-            .setHTML('<div style="font-family:var(--font-ui);"><div style="font-size:0.72rem;color:var(--color-ink-muted);margin-bottom:2px;">' + entry.date + '</div><div style="font-weight:600;font-size:0.88rem;color:var(--color-ink);margin-bottom:6px;">' + entry.title + '</div><a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.82rem;text-decoration:none;">Read →</a></div>');
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(homeMap); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () { window.location.href = entry.url; });
 
-        new maplibregl.Marker({ element: el }).setLngLat(lngLat).setPopup(popup).addTo(homeMap);
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
     });
 
     MapUtils.addJourneyLine(homeMap, coords, 'home-journey');

themes/intotheeast/templates/map.html.twig

@@ -91,20 +91,14 @@ map.on('load', function () {
         bounds.extend(lngLat);
 
         var el = MapUtils.createDotMarker(isLatest);
-
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
-        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 })
             .setLngLat(lngLat)
-            .setPopup(new maplibregl.Popup({ offset: 10, maxWidth: '220px' }).setHTML(popupHtml))
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
-            .addTo(map);
+        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 ────────────────────────────────────────── */

themes/intotheeast/templates/trip.html.twig

@@ -250,10 +250,14 @@ tripMap.on('load', function () {
         bounds.extend(lngLat);
 
         var el = MapUtils.createDotMarker(isLatest);
-        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, maxWidth: '200px' })
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
-            .setHTML('<div style="font-family:var(--font-ui);"><div style="font-size:0.72rem;color:var(--color-ink-muted);margin-bottom:2px;">' + entry.date + '</div><div style="font-weight:600;font-size:0.88rem;color:var(--color-ink);margin-bottom:6px;">' + entry.title + '</div><a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.82rem;text-decoration:none;">Read →</a></div>');
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(tripMap); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () { window.location.href = entry.url; });
 
-        new maplibregl.Marker({ element: el }).setLngLat(lngLat).setPopup(popup).addTo(tripMap);
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
     });
 
     MapUtils.addJourneyLine(tripMap, coords, 'trip-journey');