diff --git a/client/src/pages/atlas/useAtlas.ts b/client/src/pages/atlas/useAtlas.ts index 9a2f8953..99d02868 100644 --- a/client/src/pages/atlas/useAtlas.ts +++ b/client/src/pages/atlas/useAtlas.ts @@ -340,7 +340,10 @@ export function useAtlas() { ` layer.bindTooltip(tooltipHtml, { - sticky: false, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1 + // sticky so the tooltip tracks the cursor; non-sticky anchors it at the feature's + // bounds centre, which for countries with overseas territories (e.g. France) lands + // far out in the ocean instead of over the area being hovered. + sticky: true, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1 }) layer.on('click', () => { if (c.placeCount === 0 && c.tripCount === 0) { @@ -363,7 +366,7 @@ export function useAtlas() { country_layer_by_a2_ref.current[countryCode] = layer const name = feature.properties?.NAME || feature.properties?.ADMIN || resolveName(countryCode) layer.bindTooltip(`