diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index de53b08..b3248fe 100644 --- a/themes/intotheeast/css/style.css +++ b/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 { diff --git a/themes/intotheeast/templates/dailies.html.twig b/themes/intotheeast/templates/dailies.html.twig index 107e124..5eeccd2 100644 --- a/themes/intotheeast/templates/dailies.html.twig +++ b/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' }) - .setHTML('
' + entry.date + '
' + entry.title + '
Read →
'); + var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' }) + .setLngLat(lngLat) + .setHTML('' + entry.title + ''); + 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'); diff --git a/themes/intotheeast/templates/home.html.twig b/themes/intotheeast/templates/home.html.twig index 02e237a..58870d5 100644 --- a/themes/intotheeast/templates/home.html.twig +++ b/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' }) - .setHTML('
' + entry.date + '
' + entry.title + '
Read →
'); + var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' }) + .setLngLat(lngLat) + .setHTML('' + entry.title + ''); + 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'); diff --git a/themes/intotheeast/templates/map.html.twig b/themes/intotheeast/templates/map.html.twig index af9c614..889bb5e 100644 --- a/themes/intotheeast/templates/map.html.twig +++ b/themes/intotheeast/templates/map.html.twig @@ -91,20 +91,14 @@ map.on('load', function () { bounds.extend(lngLat); var el = MapUtils.createDotMarker(isLatest); - - var popupHtml = '
'; - if (entry.hero) { - popupHtml += ''; - } - popupHtml += '
📅 ' + entry.date + '
'; - popupHtml += '
' + entry.title + '
'; - popupHtml += 'Read entry →'; - popupHtml += '
'; - - 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('' + entry.title + ''); + 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 ────────────────────────────────────────── */ diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig index 3dd87da..c12b8da 100644 --- a/themes/intotheeast/templates/trip.html.twig +++ b/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' }) - .setHTML('
' + entry.date + '
' + entry.title + '
Read →
'); + var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' }) + .setLngLat(lngLat) + .setHTML('' + entry.title + ''); + 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');