@internetstiftelsen/charts 0.20.0 → 0.20.1

package/dist/tooltip/dom.d.ts

@@ -27,6 +27,8 @@ export declare class TooltipDom {
     setContent(content: string): void;
     getBounds(): DOMRect | null;
     showAt(left: number, top: number): void;
+    hasVisibleTooltips(): boolean;
+    moveVisibleTooltips(deltaX: number, deltaY: number): void;
     hide(): void;
     cleanup(): void;
     measureTooltip(tooltip: TooltipDivSelection, content: string): {
@@ -50,6 +52,7 @@ export declare class TooltipDom {
     private scheduleTooltipPositionReset;
     private cancelTooltipPositionReset;
     private getTooltipTransitionStyle;
+    private getTooltipNodes;
     private isTooltipVisible;
     private getTooltipPosition;
     private hasVisibleSlideOffset;

package/dist/tooltip/dom.js

@@ -108,6 +108,22 @@ export class TooltipDom {
         }
         this.showTooltipAt(this.tooltipDiv, left, top);
     }
+    hasVisibleTooltips() {
+        return this.getTooltipNodes().some((node) => this.isTooltipVisible(node));
+    }
+    moveVisibleTooltips(deltaX, deltaY) {
+        this.getTooltipNodes().forEach((node) => {
+            if (!this.isTooltipVisible(node)) {
+                return;
+            }
+            const position = this.getTooltipPosition(node);
+            if (!position) {
+                return;
+            }
+            node.style.left = `${position.left + deltaX}px`;
+            node.style.top = `${position.top + deltaY}px`;
+        });
+    }
     hide() {
         const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
         if (!tooltip.empty()) {
@@ -350,6 +366,9 @@ export class TooltipDom {
     getTooltipTransitionStyle() {
         return `opacity ${this.transition.duration}ms ${this.transition.easing}, transform ${this.transition.duration}ms ${this.transition.easing}`;
     }
+    getTooltipNodes() {
+        return Array.from(document.querySelectorAll(`#${this.id}, [data-chart-tooltip-owner="${this.splitTooltipOwner}"]`));
+    }
     isTooltipVisible(node) {
         return (node.style.visibility === 'visible' && node.style.opacity !== '0');
     }

package/dist/tooltip/xy-interaction.js

@@ -301,11 +301,11 @@ export function attachXYTooltipArea(config) {
         const svgNode = svg.node();
         if (!svgNode) {
             dom.hideTooltipSelection(tooltip);
-            return null;
+            return;
         }
         const placementBounds = getTooltipPlacementBounds(svgNode);
         const candidates = [];
-        series.forEach((currentSeries, seriesIndex) => {
+        series.forEach((currentSeries) => {
             const rawValue = dataPoint[currentSeries.dataKey];
             if (rawValue === null || rawValue === undefined) {
                 return;
@@ -319,57 +319,90 @@ export function attachXYTooltipArea(config) {
             const target = resolveSplitTooltipTarget(currentSeries, visibleAnchor, resolvedBarAnchorPosition);
             candidates.push({
                 series: currentSeries,
-                seriesIndex,
                 anchor: visibleAnchor,
                 target,
             });
         });
-        const selectedCandidate = candidates.find((candidate) => candidate.seriesIndex === request.seriesIndex) ?? getClosestSingleTooltipCandidate(candidates, request);
+        const selectedCandidate = getClosestSingleTooltipCandidate(candidates, request);
         updateVisualStateAtIndex(request.index);
         dom.hideSplitTooltips();
         if (!selectedCandidate) {
             dom.hideTooltipSelection(tooltip);
-            return null;
+            return;
         }
         dom.applyRootTooltipStyles(theme, getSeriesTooltipStyle(selectedCandidate.series, dataPoint, request.index));
         const content = buildSplitTooltipContent(dataPoint, selectedCandidate.series);
         const measuredTooltip = dom.measureTooltip(tooltip, content);
         if (!measuredTooltip) {
             dom.hideTooltipSelection(tooltip);
-            return null;
+            return;
         }
         const arrowEdge = resolveTooltipArrowEdge(resolvedPosition, selectedCandidate.anchor, selectedCandidate.target, measuredTooltip.width, measuredTooltip.height, placementBounds);
         const tooltipPosition = getAnchoredTooltipPosition(selectedCandidate.anchor, selectedCandidate.target, measuredTooltip.width, measuredTooltip.height, arrowEdge, placementBounds);
         if (!tooltipPosition) {
             dom.hideTooltipSelection(tooltip);
-            return null;
+            return;
         }
         dom.renderTooltipWithConnector(tooltip, arrowEdge, tooltipPosition.left, tooltipPosition.top, measuredTooltip.width, measuredTooltip.height, selectedCandidate.target.x, selectedCandidate.target.y, selectedCandidate.anchor);
-        return {
-            index: request.index,
-            seriesIndex: selectedCandidate.seriesIndex,
-        };
     };
-    let activeTooltipRequest = null;
+    const tooltipSvgNode = svg.node();
+    let activeSvgBounds = null;
+    let positionTrackingFrame = null;
+    const stopPositionTracking = () => {
+        activeSvgBounds = null;
+        if (positionTrackingFrame !== null) {
+            cancelFrame(positionTrackingFrame);
+            positionTrackingFrame = null;
+        }
+    };
+    const updateTooltipPosition = () => {
+        if (!activeSvgBounds || !tooltipSvgNode) {
+            return;
+        }
+        const nextSvgBounds = getElementTooltipBounds(tooltipSvgNode);
+        const deltaX = nextSvgBounds.minLeft - activeSvgBounds.minLeft;
+        const deltaY = nextSvgBounds.minTop - activeSvgBounds.minTop;
+        if (deltaX === 0 && deltaY === 0) {
+            return;
+        }
+        dom.moveVisibleTooltips(deltaX, deltaY);
+        activeSvgBounds = nextSvgBounds;
+    };
+    const trackTooltipPosition = () => {
+        positionTrackingFrame = null;
+        if (!tooltipSvgNode?.isConnected || !dom.hasVisibleTooltips()) {
+            stopPositionTracking();
+            return;
+        }
+        // Scroll events can arrive late during touch or momentum scrolling.
+        updateTooltipPosition();
+        positionTrackingFrame = requestFrame(trackTooltipPosition);
+    };
     const hideTooltip = () => {
-        activeTooltipRequest = null;
+        stopPositionTracking();
         dom.hideTooltipSelection(tooltip);
         dom.hideSplitTooltips();
         clearVisualState();
     };
-    const tooltipSvgNode = svg.node();
-    const queuedRender = createQueuedTooltipRender(tooltipSvgNode, (request) => {
+    const renderTooltip = (request) => {
+        if (!tooltipSvgNode) {
+            return;
+        }
+        activeSvgBounds = getElementTooltipBounds(tooltipSvgNode);
+        if (positionTrackingFrame === null) {
+            positionTrackingFrame = requestFrame(trackTooltipPosition);
+        }
         if (mode === 'single') {
-            activeTooltipRequest = showSingleTooltip(request);
+            showSingleTooltip(request);
             return;
         }
-        activeTooltipRequest = { index: request.index };
         if (mode === 'split') {
             showSplitTooltipAtIndex(request.index);
             return;
         }
         showSharedTooltipAtIndex(request.index);
-    });
+    };
+    const queuedRender = createQueuedTooltipRender(tooltipSvgNode, renderTooltip);
     overlay
         .on('mousemove', (event) => {
         const [mouseX, mouseY] = pointer(event, svg.node());
@@ -415,18 +448,7 @@ export function attachXYTooltipArea(config) {
         }
         queuedRender.cancel();
         select(this).attr('stroke', '#111827').attr('stroke-width', 2);
-        if (mode === 'single') {
-            activeTooltipRequest = showSingleTooltip({
-                index: currentIndex,
-            });
-            return;
-        }
-        activeTooltipRequest = { index: currentIndex };
-        if (mode === 'split') {
-            showSplitTooltipAtIndex(currentIndex);
-            return;
-        }
-        showSharedTooltipAtIndex(currentIndex);
+        renderTooltip({ index: currentIndex });
     })
         .on('blur', function (event) {
         select(this).attr('stroke', 'none').attr('stroke-width', 0);
@@ -448,12 +470,12 @@ export function attachXYTooltipArea(config) {
         event.preventDefault();
         focusTargetNodes[nextIndex].focus();
     });
-    return attachTooltipScrollListeners(tooltipSvgNode, () => {
-        if (activeTooltipRequest === null) {
-            return;
-        }
-        queuedRender.request(activeTooltipRequest);
-    });
+    const detachScrollListeners = attachTooltipScrollListeners(tooltipSvgNode, updateTooltipPosition);
+    return () => {
+        detachScrollListeners?.();
+        queuedRender.cancel();
+        stopPositionTracking();
+    };
 }
 function normalizeFormatterValue(value) {
     if (value === null ||

package/docs/components.md

@@ -167,6 +167,11 @@ paths are omitted when the arrow is already close to its target. For line,
 area, and scatter points, side split tooltips spread nearby point targets
 within the connectorless arrow range before drawing connector paths.
 
+Visible XY tooltips track their targets on every animation frame, including
+during touch and momentum scrolling. Their initial placement is preserved,
+allowing them to pass beyond the container edges instead of sticking there
+until blur. Tracking stops when the tooltips are hidden or the chart is destroyed.
+
 For horizontal bar charts, prefer `position: 'auto'` or `position: 'vertical'`.
 `position: 'side'` and `barAnchorPosition: 'top' | 'middle'` are kept for
 legacy configs, but horizontal bars resolve bar anchoring automatically.

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.20.0",
+    "version": "0.20.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,