@internetstiftelsen/charts 0.10.0 → 0.11.0

package/dist/tooltip.js

@@ -1,13 +1,29 @@
 import { pointer, select } from 'd3';
 import { getSeriesColor } from './types.js';
 import { sanitizeForCSS, mergeDeep } from './utils.js';
+const TOOLTIP_OFFSET_PX = 12;
+const TOOLTIP_VIEWPORT_PADDING_PX = 10;
+const TOOLTIP_CONNECTOR_INSET_PX = 14;
+const TOOLTIP_CONNECTOR_PADDING_PX = 4;
+const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
+const TOOLTIP_BOX_ARROW_LENGTH_PX = 10;
+const TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX = 6;
+const TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX = 1;
+const SPLIT_TOOLTIP_GAP_PX = 8;
+const DEFAULT_TOOLTIP_TRANSITION = {
+    show: false,
+    duration: 120,
+    easing: 'ease-out',
+};
+const TOOLTIP_HIDDEN_TRANSFORM = 'translateY(2px)';
+const TOOLTIP_VISIBLE_TRANSFORM = 'translateY(0)';
 export class Tooltip {
-    constructor(config) {
+    constructor(config = {}) {
         Object.defineProperty(this, "id", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: 'iisChartTooltip'
+            value: void 0
         });
         Object.defineProperty(this, "type", {
             enumerable: true,
@@ -15,6 +31,30 @@ export class Tooltip {
             writable: true,
             value: 'tooltip'
         });
+        Object.defineProperty(this, "mode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "position", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "barAnchorPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "transition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "formatter", {
             enumerable: true,
             configurable: true,
@@ -39,19 +79,52 @@ export class Tooltip {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "splitTooltipOwner", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "tooltipStyleKeys", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakMap()
+        });
         Object.defineProperty(this, "tooltipDiv", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        this.formatter = config?.formatter;
-        this.labelFormatter = config?.labelFormatter;
-        this.customFormatter = config?.customFormatter;
-        this.exportHooks = config?.exportHooks;
+        Object.defineProperty(this, "tooltipTheme", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        const { mode = 'split', position = 'side', barAnchorPosition = 'middle', transition, formatter, labelFormatter, customFormatter, exportHooks, } = config;
+        const tooltipId = Tooltip.nextTooltipId++;
+        this.id = `iisChartTooltip-${tooltipId}`;
+        this.splitTooltipOwner = `${this.id}-split`;
+        this.mode = mode;
+        this.position = position;
+        this.barAnchorPosition = barAnchorPosition;
+        this.transition = {
+            ...DEFAULT_TOOLTIP_TRANSITION,
+            ...transition,
+        };
+        this.formatter = formatter;
+        this.labelFormatter = labelFormatter;
+        this.customFormatter = customFormatter;
+        this.exportHooks = exportHooks;
     }
     getExportConfig() {
         return {
+            mode: this.mode,
+            position: this.position,
+            barAnchorPosition: this.barAnchorPosition,
+            transition: this.transition,
             formatter: this.formatter,
             labelFormatter: this.labelFormatter,
             customFormatter: this.customFormatter,
@@ -72,19 +145,10 @@ export class Tooltip {
                 .attr('class', 'chart-tooltip')
                 .attr('id', this.id)
             : existingTooltip;
-        tooltip
-            .style('position', 'absolute')
-            .style('visibility', 'hidden')
-            .style('background-color', 'white')
-            .style('border', '1px solid #ddd')
-            .style('border-radius', '4px')
-            .style('padding', '8px')
-            .style('box-shadow', '0 2px 4px rgba(0,0,0,0.1)')
-            .style('font-family', theme.axis.fontFamily)
-            .style('font-size', '12px')
-            .style('pointer-events', 'none')
-            .style('z-index', '1000');
+        this.removeSplitTooltips();
+        this.applyTooltipStylesIfNeeded(tooltip, theme);
         this.tooltipDiv = tooltip;
+        this.hideTooltipSelection(tooltip);
     }
     attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal = false, categoryScaleType = 'band', resolveSeriesValue = (targetSeries, dataPoint) => {
         const rawValue = dataPoint[targetSeries.dataKey];
@@ -93,9 +157,14 @@ export class Tooltip {
         }
         return parseValue(rawValue);
     }) {
-        if (!this.tooltipDiv) {
+        if (!this.tooltipDiv || data.length === 0) {
             return;
         }
+        const tooltip = this.tooltipDiv;
+        const formatter = this.formatter;
+        const labelFormatter = this.labelFormatter;
+        const customFormatter = this.customFormatter;
+        const tooltipMode = this.mode;
         const normalizeFormatterValue = (value) => {
             if (value === null ||
                 value === undefined ||
@@ -107,13 +176,6 @@ export class Tooltip {
             }
             return String(value);
         };
-        if (data.length === 0) {
-            return;
-        }
-        const tooltip = this.tooltipDiv;
-        const formatter = this.formatter;
-        const labelFormatter = this.labelFormatter;
-        const customFormatter = this.customFormatter;
         const getCategoryScaleValue = (value, scaleType) => {
             switch (scaleType) {
                 case 'band':
@@ -128,13 +190,11 @@ export class Tooltip {
             }
         };
         const getXPosition = (dataPoint) => {
-            const xValue = dataPoint[xKey];
-            const scaled = x(getCategoryScaleValue(xValue, categoryScaleType));
+            const scaled = x(getCategoryScaleValue(dataPoint[xKey], categoryScaleType));
             return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
         };
         const getYPosition = (dataPoint) => {
-            const yValue = dataPoint[xKey];
-            const scaled = y(getCategoryScaleValue(yValue, categoryScaleType));
+            const scaled = y(getCategoryScaleValue(dataPoint[xKey], categoryScaleType));
             return (scaled || 0) + (y.bandwidth ? y.bandwidth() / 2 : 0);
         };
         const stripHtml = (content) => {
@@ -144,46 +204,36 @@ export class Tooltip {
                 .replace(/\s+/g, ' ')
                 .trim();
         };
-        const buildTooltipContent = (dataPoint) => {
-            if (customFormatter) {
-                return customFormatter(dataPoint, series);
-            }
+        const buildTooltipLabel = (dataPoint) => {
             const labelValue = dataPoint[xKey];
-            const label = labelFormatter
+            return labelFormatter
                 ? labelFormatter(String(labelValue), dataPoint)
                 : String(labelValue);
-            let content = `<strong>${label}</strong><br/>`;
-            series.forEach((s) => {
-                const value = dataPoint[s.dataKey];
-                if (formatter) {
-                    content +=
-                        formatter(s.dataKey, normalizeFormatterValue(value), dataPoint) + '<br/>';
-                    return;
-                }
-                content += `${s.dataKey}: ${value}<br/>`;
-            });
-            return content;
         };
-        const buildAccessibleLabel = (dataPoint) => {
+        const buildTooltipRow = (dataPoint, currentSeries) => {
+            const value = dataPoint[currentSeries.dataKey];
+            if (formatter) {
+                return formatter(currentSeries.dataKey, normalizeFormatterValue(value), dataPoint);
+            }
+            return `${currentSeries.dataKey}: ${value}`;
+        };
+        const buildSharedTooltipContent = (dataPoint) => {
             if (customFormatter) {
-                return stripHtml(customFormatter(dataPoint, series));
+                return customFormatter(dataPoint, series);
             }
-            const labelValue = dataPoint[xKey];
-            const label = labelFormatter
-                ? labelFormatter(String(labelValue), dataPoint)
-                : String(labelValue);
-            const parts = [label];
-            series.forEach((s) => {
-                const value = dataPoint[s.dataKey];
-                if (formatter) {
-                    parts.push(stripHtml(formatter(s.dataKey, normalizeFormatterValue(value), dataPoint)));
-                    return;
-                }
-                parts.push(`${s.dataKey}: ${value === null || value === undefined
-                    ? 'no data'
-                    : value}`);
-            });
-            return parts.join('. ');
+            const label = buildTooltipLabel(dataPoint);
+            const rows = series.map((currentSeries) => buildTooltipRow(dataPoint, currentSeries));
+            return `<strong>${label}</strong><br/>${rows.join('<br/>')}`;
+        };
+        const buildSplitTooltipContent = (dataPoint, currentSeries) => {
+            if (customFormatter) {
+                return customFormatter(dataPoint, [currentSeries]);
+            }
+            const label = buildTooltipLabel(dataPoint);
+            return `<strong>${label}</strong><br/>${buildTooltipRow(dataPoint, currentSeries)}`;
+        };
+        const buildAccessibleLabel = (dataPoint) => {
+            return stripHtml(buildSharedTooltipContent(dataPoint));
         };
         const isTooltipFocusTarget = (element) => {
             return (element instanceof SVGElement &&
@@ -203,7 +253,6 @@ export class Tooltip {
             }
             return closestIndex;
         };
-        // Create overlay rect for mouse tracking using plot area bounds
         const overlay = svg
             .append('rect')
             .attr('class', 'tooltip-overlay')
@@ -214,14 +263,20 @@ export class Tooltip {
             .attr('aria-hidden', 'true')
             .style('fill', 'none')
             .style('pointer-events', 'all');
-        const pointSeries = series.filter((s) => s.type === 'line' || s.type === 'area' || s.type === 'scatter');
-        const barSeries = series.filter((s) => s.type === 'bar');
+        const pointSeries = series.filter((currentSeries) => {
+            return (currentSeries.type === 'line' ||
+                currentSeries.type === 'area' ||
+                currentSeries.type === 'scatter');
+        });
+        const barSeries = series.filter((currentSeries) => {
+            return currentSeries.type === 'bar';
+        });
         const hasBarSeries = barSeries.length > 0;
-        const focusCircles = pointSeries.map((s) => {
-            const seriesColor = getSeriesColor(s);
+        const focusCircles = pointSeries.map((currentSeries) => {
+            const seriesColor = getSeriesColor(currentSeries);
             return svg
                 .append('circle')
-                .attr('class', `focus-circle-${sanitizeForCSS(s.dataKey)}`)
+                .attr('class', `focus-circle-${sanitizeForCSS(currentSeries.dataKey)}`)
                 .attr('r', theme.line.point.size + 1)
                 .attr('fill', theme.line.point.color || seriesColor)
                 .attr('stroke', theme.line.point.strokeColor || seriesColor)
@@ -235,48 +290,51 @@ export class Tooltip {
             if (!hasBarSeries) {
                 return;
             }
-            barSeries.forEach((s) => {
-                const sanitizedKey = sanitizeForCSS(s.dataKey);
-                svg.selectAll(`.bar-${sanitizedKey}`).style('opacity', 1);
+            barSeries.forEach((currentSeries) => {
+                svg.selectAll(`.bar-${sanitizeForCSS(currentSeries.dataKey)}`).style('opacity', 1);
             });
         };
-        const showTooltipAtIndex = (closestIndex) => {
+        const updateVisualStateAtIndex = (closestIndex) => {
             const dataPoint = data[closestIndex];
             const dataPointPosition = dataPointPositions[closestIndex];
-            pointSeries.forEach((s, i) => {
-                const value = resolveSeriesValue(s, dataPoint, closestIndex);
+            pointSeries.forEach((currentSeries, seriesIndex) => {
+                const value = resolveSeriesValue(currentSeries, dataPoint, closestIndex);
                 if (!Number.isFinite(value)) {
-                    focusCircles[i].style('opacity', 0);
+                    focusCircles[seriesIndex].style('opacity', 0);
                     return;
                 }
                 if (isHorizontal) {
-                    focusCircles[i]
+                    focusCircles[seriesIndex]
                         .attr('cx', x(value) ?? 0)
                         .attr('cy', dataPointPosition)
                         .style('opacity', 1);
                     return;
                 }
-                focusCircles[i]
+                focusCircles[seriesIndex]
                     .attr('cx', dataPointPosition)
                     .attr('cy', y(value) ?? 0)
                     .style('opacity', 1);
             });
-            if (hasBarSeries) {
-                barSeries.forEach((s) => {
-                    const sanitizedKey = sanitizeForCSS(s.dataKey);
-                    svg.selectAll(`.bar-${sanitizedKey}`).style('opacity', (_, i) => (i === closestIndex ? 1 : 0.5));
-                });
+            if (!hasBarSeries) {
+                return;
+            }
+            barSeries.forEach((currentSeries) => {
+                svg.selectAll(`.bar-${sanitizeForCSS(currentSeries.dataKey)}`).style('opacity', (_, index) => index === closestIndex ? 1 : 0.5);
+            });
+        };
+        const showSharedTooltipAtIndex = (closestIndex) => {
+            const dataPoint = data[closestIndex];
+            const dataPointPosition = dataPointPositions[closestIndex];
+            updateVisualStateAtIndex(closestIndex);
+            this.hideSplitTooltips();
+            const content = buildSharedTooltipContent(dataPoint);
+            const measuredTooltip = this.measureTooltip(tooltip, content);
+            if (!measuredTooltip) {
+                this.hideTooltipSelection(tooltip);
+                return;
             }
-            tooltip
-                .style('visibility', 'visible')
-                .html(buildTooltipContent(dataPoint));
-            const tooltipNode = tooltip.node();
-            const tooltipRect = tooltipNode.getBoundingClientRect();
-            const tooltipWidth = tooltipRect.width;
-            const tooltipHeight = tooltipRect.height;
             const svgRect = svg.node().getBoundingClientRect();
-            const offsetX = 12;
-            const values = series.map((s) => resolveSeriesValue(s, dataPoint, closestIndex));
+            const values = series.map((currentSeries) => resolveSeriesValue(currentSeries, dataPoint, closestIndex));
             const finiteValues = values.filter((value) => Number.isFinite(value));
             const minValue = finiteValues.length
                 ? Math.min(...finiteValues)
@@ -284,58 +342,171 @@ export class Tooltip {
             const maxValue = finiteValues.length
                 ? Math.max(...finiteValues)
                 : 0;
-            let tooltipX;
-            let tooltipY;
+            const sharedAnchor = {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                centerX: 0,
+                centerY: 0,
+            };
             if (isHorizontal) {
                 const minX = x(minValue);
                 const maxX = x(maxValue);
-                const midX = (minX + maxX) / 2;
-                tooltipX = svgRect.left + window.scrollX + midX + offsetX;
-                tooltipY =
-                    svgRect.top +
-                        window.scrollY +
-                        dataPointPosition -
-                        tooltipHeight / 2;
+                const centerX = svgRect.left + window.scrollX + (minX + maxX) / 2;
+                const centerY = svgRect.top + window.scrollY + dataPointPosition;
+                sharedAnchor.left = centerX;
+                sharedAnchor.right = centerX;
+                sharedAnchor.top = centerY;
+                sharedAnchor.bottom = centerY;
+                sharedAnchor.centerX = centerX;
+                sharedAnchor.centerY = centerY;
             }
             else {
                 const minY = y(maxValue);
                 const maxY = y(minValue);
-                const midY = (minY + maxY) / 2;
-                tooltipX =
-                    svgRect.left + window.scrollX + dataPointPosition + offsetX;
-                tooltipY =
-                    svgRect.top + window.scrollY + midY - tooltipHeight / 2;
-            }
-            const viewportWidth = window.innerWidth;
-            if (tooltipX + tooltipWidth > viewportWidth - 10) {
-                if (isHorizontal) {
-                    const minX = x(minValue);
-                    tooltipX =
-                        svgRect.left +
-                            window.scrollX +
-                            minX -
-                            tooltipWidth -
-                            offsetX;
+                const centerX = svgRect.left + window.scrollX + dataPointPosition;
+                const topY = svgRect.top + window.scrollY + minY;
+                const bottomY = svgRect.top + window.scrollY + maxY;
+                sharedAnchor.left = centerX;
+                sharedAnchor.right = centerX;
+                sharedAnchor.top = topY;
+                sharedAnchor.bottom = bottomY;
+                sharedAnchor.centerX = centerX;
+                sharedAnchor.centerY = (topY + bottomY) / 2;
+            }
+            const target = this.resolveSharedTooltipTarget(sharedAnchor);
+            const arrowEdge = this.resolveTooltipArrowEdge(sharedAnchor, target, measuredTooltip.width, measuredTooltip.height);
+            const position = this.getAnchoredTooltipPosition(sharedAnchor, target, measuredTooltip.width, measuredTooltip.height, arrowEdge);
+            if (!position) {
+                this.hideTooltipSelection(tooltip);
+                return;
+            }
+            this.renderTooltipWithoutConnector(tooltip, position.left, position.top);
+        };
+        const getSeriesTooltipAnchor = (currentSeries, dataPoint, index) => {
+            const value = resolveSeriesValue(currentSeries, dataPoint, index);
+            if (!Number.isFinite(value)) {
+                return null;
+            }
+            const svgNode = svg.node();
+            if (!svgNode) {
+                return null;
+            }
+            if (currentSeries.type === 'bar') {
+                return this.resolveBarTooltipAnchor(svgNode, currentSeries.dataKey, index);
+            }
+            const categoryPosition = dataPointPositions[index];
+            const valuePosition = isHorizontal
+                ? (x(value) ?? 0)
+                : (y(value) ?? 0);
+            return this.resolvePointTooltipAnchor(svgNode, isHorizontal, categoryPosition, valuePosition);
+        };
+        const showSplitTooltipAtIndex = (closestIndex) => {
+            const dataPoint = data[closestIndex];
+            updateVisualStateAtIndex(closestIndex);
+            this.hideTooltipSelection(tooltip);
+            this.hideSplitTooltips();
+            const layouts = [];
+            series.forEach((currentSeries, seriesIndex) => {
+                const rawValue = dataPoint[currentSeries.dataKey];
+                if (rawValue === null || rawValue === undefined) {
+                    return;
+                }
+                const anchor = getSeriesTooltipAnchor(currentSeries, dataPoint, closestIndex);
+                if (!anchor) {
+                    return;
                 }
-                else {
-                    tooltipX =
-                        svgRect.left +
-                            window.scrollX +
-                            dataPointPosition -
-                            tooltipWidth -
-                            offsetX;
+                const splitTooltip = this.getSplitTooltip(seriesIndex, theme);
+                const content = buildSplitTooltipContent(dataPoint, currentSeries);
+                const measuredTooltip = this.measureTooltip(splitTooltip, content);
+                if (!measuredTooltip) {
+                    return;
                 }
+                const target = this.resolveSplitTooltipTarget(currentSeries, anchor);
+                const arrowEdge = this.resolveTooltipArrowEdge(anchor, target, measuredTooltip.width, measuredTooltip.height);
+                const position = this.getAnchoredTooltipPosition(anchor, target, measuredTooltip.width, measuredTooltip.height, arrowEdge);
+                if (!position) {
+                    return;
+                }
+                layouts.push({
+                    div: splitTooltip,
+                    anchor,
+                    width: measuredTooltip.width,
+                    height: measuredTooltip.height,
+                    left: position.left,
+                    top: position.top,
+                    arrowEdge,
+                    targetX: target.x,
+                    targetY: target.y,
+                });
+            });
+            if (layouts.length === 0) {
+                return;
             }
-            tooltipX = Math.max(10, tooltipX);
-            tooltipY = Math.max(10, Math.min(tooltipY, window.innerHeight + window.scrollY - tooltipHeight - 10));
-            tooltip
-                .style('left', `${tooltipX}px`)
-                .style('top', `${tooltipY}px`);
+            this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
+            this.resolveSplitTooltipCollisions(layouts, 'side', this.getOppositeSideArrowEdge);
+            this.resolveSplitTooltipPositions(layouts);
+            layouts.forEach((layout) => {
+                this.renderTooltipWithConnector(layout.div, layout.arrowEdge, layout.left, layout.top, layout.width, layout.height, layout.targetX, layout.targetY);
+            });
         };
         const hideTooltip = () => {
-            tooltip.style('visibility', 'hidden');
+            this.hideTooltipSelection(tooltip);
+            this.hideSplitTooltips();
             clearVisualState();
         };
+        let pendingTooltipFrame = null;
+        let pendingTooltipIndex = null;
+        const tooltipSvgNode = svg.node();
+        const requestFrame = (callback) => {
+            if (typeof window.requestAnimationFrame === 'function') {
+                return window.requestAnimationFrame(callback);
+            }
+            return window.setTimeout(() => {
+                callback(window.performance.now());
+            }, 16);
+        };
+        const cancelFrame = (frameId) => {
+            if (typeof window.cancelAnimationFrame === 'function') {
+                window.cancelAnimationFrame(frameId);
+                return;
+            }
+            window.clearTimeout(frameId);
+        };
+        const renderTooltipAtIndex = (index) => {
+            if (tooltipMode === 'split') {
+                showSplitTooltipAtIndex(index);
+                return;
+            }
+            showSharedTooltipAtIndex(index);
+        };
+        const cancelPendingTooltipRender = () => {
+            if (pendingTooltipFrame === null) {
+                return;
+            }
+            cancelFrame(pendingTooltipFrame);
+            pendingTooltipFrame = null;
+            pendingTooltipIndex = null;
+        };
+        const requestTooltipRenderAtIndex = (index) => {
+            pendingTooltipIndex = index;
+            if (pendingTooltipFrame !== null) {
+                return;
+            }
+            pendingTooltipFrame = requestFrame(() => {
+                const nextIndex = pendingTooltipIndex;
+                pendingTooltipFrame = null;
+                pendingTooltipIndex = null;
+                if (nextIndex === null) {
+                    return;
+                }
+                if (!tooltipSvgNode?.isConnected) {
+                    return;
+                }
+                renderTooltipAtIndex(nextIndex);
+            });
+        };
         const getFocusTargetBounds = (index) => {
             if (isHorizontal) {
                 if (y.bandwidth) {
@@ -393,12 +564,14 @@ export class Tooltip {
         overlay
             .on('mousemove', (event) => {
             const [mouseX, mouseY] = pointer(event, svg.node());
-            showTooltipAtIndex(getClosestIndexFromPointer(mouseX, mouseY));
+            const closestIndex = getClosestIndexFromPointer(mouseX, mouseY);
+            requestTooltipRenderAtIndex(closestIndex);
         })
             .on('mouseout', () => {
             if (isTooltipFocusTarget(document.activeElement)) {
                 return;
             }
+            cancelPendingTooltipRender();
             hideTooltip();
         });
         const focusTargets = svg
@@ -420,20 +593,38 @@ export class Tooltip {
             .attr('aria-label', (dataPoint) => buildAccessibleLabel(dataPoint))
             .style('pointer-events', 'none');
         const focusTargetNodes = focusTargets.nodes();
+        const getNextFocusTargetIndex = (currentIndex, key) => {
+            switch (key) {
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    return currentIndex + 1;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    return currentIndex - 1;
+                case 'Home':
+                    return 0;
+                case 'End':
+                    return focusTargetNodes.length - 1;
+                default:
+                    return -1;
+            }
+        };
         focusTargets
             .on('focus', function () {
             const currentIndex = focusTargetNodes.indexOf(this);
             if (currentIndex === -1) {
                 return;
             }
+            cancelPendingTooltipRender();
             select(this).attr('stroke', '#111827').attr('stroke-width', 2);
-            showTooltipAtIndex(currentIndex);
+            renderTooltipAtIndex(currentIndex);
         })
             .on('blur', function (event) {
             select(this).attr('stroke', 'none').attr('stroke-width', 0);
             if (isTooltipFocusTarget(event.relatedTarget)) {
                 return;
             }
+            cancelPendingTooltipRender();
             hideTooltip();
         })
             .on('keydown', function (event) {
@@ -441,41 +632,659 @@ export class Tooltip {
             if (currentIndex === -1) {
                 return;
             }
-            let nextIndex = null;
-            switch (event.key) {
-                case 'ArrowRight':
-                case 'ArrowDown':
-                    nextIndex = currentIndex + 1;
-                    break;
-                case 'ArrowLeft':
-                case 'ArrowUp':
-                    nextIndex = currentIndex - 1;
-                    break;
-                case 'Home':
-                    nextIndex = 0;
-                    break;
-                case 'End':
-                    nextIndex = focusTargetNodes.length - 1;
-                    break;
-                default:
-                    return;
-            }
-            if (nextIndex === null ||
-                nextIndex < 0 ||
-                nextIndex >= focusTargetNodes.length) {
+            const nextIndex = getNextFocusTargetIndex(currentIndex, event.key);
+            if (nextIndex < 0 || nextIndex >= focusTargetNodes.length) {
                 return;
             }
             event.preventDefault();
             focusTargetNodes[nextIndex].focus();
         });
     }
+    setContent(content) {
+        if (!this.tooltipDiv) {
+            return;
+        }
+        this.setTooltipMarkup(this.tooltipDiv, content);
+    }
+    getBounds() {
+        const node = this.tooltipDiv?.node();
+        if (!node) {
+            return null;
+        }
+        return node.getBoundingClientRect();
+    }
+    showAt(left, top) {
+        if (!this.tooltipDiv) {
+            return;
+        }
+        if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            this.hide();
+            return;
+        }
+        this.showTooltipAt(this.tooltipDiv, left, top);
+    }
+    hide() {
+        const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
+        if (!tooltip.empty()) {
+            this.hideTooltipSelection(tooltip);
+        }
+        this.hideSplitTooltips();
+    }
     cleanup() {
+        this.removeRootTooltip();
+        this.removeSplitTooltips();
+        this.tooltipDiv = null;
+    }
+    applyTooltipStylesIfNeeded(tooltip, theme) {
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        const styleKey = this.getTooltipStyleKey(theme);
+        if (this.tooltipStyleKeys.get(node) === styleKey) {
+            this.tooltipTheme = theme.tooltip;
+            return;
+        }
+        this.tooltipStyleKeys.set(node, styleKey);
+        this.writeTooltipStyles(tooltip, theme);
+    }
+    getTooltipStyleKey(theme) {
+        return [
+            theme.tooltip.background,
+            theme.tooltip.border,
+            theme.tooltip.color,
+            theme.tooltip.fontFamily,
+            theme.tooltip.fontSize,
+            theme.tooltip.fontWeight,
+            this.transition.show,
+            this.transition.duration,
+            this.transition.easing,
+        ].join('|');
+    }
+    writeTooltipStyles(tooltip, theme) {
+        this.tooltipTheme = theme.tooltip;
+        tooltip
+            .style('position', 'absolute')
+            .style('background-color', theme.tooltip.background)
+            .style('border', `1px solid ${theme.tooltip.border}`)
+            .style('border-radius', '4px')
+            .style('padding', '8px')
+            .style('box-shadow', '0 2px 4px rgba(0,0,0,0.1)')
+            .style('color', theme.tooltip.color)
+            .style('font-family', theme.tooltip.fontFamily)
+            .style('font-size', `${theme.tooltip.fontSize}px`)
+            .style('font-weight', theme.tooltip.fontWeight)
+            .style('overflow', 'visible')
+            .style('isolation', 'isolate')
+            .style('pointer-events', 'none')
+            .style('z-index', '1000');
+        if (this.transition.show) {
+            tooltip
+                .style('transition', `opacity ${this.transition.duration}ms ${this.transition.easing}, transform ${this.transition.duration}ms ${this.transition.easing}`)
+                .style('will-change', 'opacity, transform');
+            return;
+        }
+        tooltip
+            .style('opacity', null)
+            .style('transform', null)
+            .style('transition', null)
+            .style('will-change', null);
+    }
+    measureTooltip(tooltip, content) {
+        this.setTooltipMarkup(tooltip, content);
+        tooltip.style('left', '-9999px').style('top', '-9999px');
+        this.hideTooltipSelection(tooltip);
+        const tooltipNode = tooltip.node();
+        if (!tooltipNode) {
+            return null;
+        }
+        const tooltipRect = tooltipNode.getBoundingClientRect();
+        if (!Number.isFinite(tooltipRect.width) ||
+            !Number.isFinite(tooltipRect.height)) {
+            return null;
+        }
+        return {
+            width: tooltipRect.width,
+            height: tooltipRect.height,
+        };
+    }
+    renderTooltipWithConnector(tooltip, arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY) {
+        if (!Number.isFinite(left) ||
+            !Number.isFinite(top) ||
+            !Number.isFinite(targetX) ||
+            !Number.isFinite(targetY)) {
+            this.hideTooltipSelection(tooltip);
+            return;
+        }
+        const connectorLayout = this.resolveTooltipConnectorLayout(arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY);
+        if (!connectorLayout) {
+            this.hideTooltipSelection(tooltip);
+            return;
+        }
+        this.appendTooltipConnector(tooltip, connectorLayout);
+        this.showTooltipAt(tooltip, left, top);
+    }
+    renderTooltipWithoutConnector(tooltip, left, top) {
+        if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            this.hideTooltipSelection(tooltip);
+            return;
+        }
+        this.showTooltipAt(tooltip, left, top);
+    }
+    showTooltipAt(tooltip, left, top) {
+        tooltip.style('left', `${left}px`).style('top', `${top}px`);
+        this.showTooltipSelection(tooltip);
+    }
+    showTooltipSelection(tooltip) {
+        tooltip.style('visibility', 'visible');
+        if (!this.transition.show) {
+            return;
+        }
+        tooltip
+            .style('opacity', '1')
+            .style('transform', TOOLTIP_VISIBLE_TRANSFORM);
+    }
+    hideTooltipSelection(tooltip) {
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        this.hideTooltipElement(node);
+    }
+    hideTooltipElement(node) {
+        if (!this.transition.show) {
+            node.style.visibility = 'hidden';
+            return;
+        }
+        node.style.visibility = 'visible';
+        node.style.opacity = '0';
+        node.style.transform = TOOLTIP_HIDDEN_TRANSFORM;
+    }
+    setTooltipMarkup(tooltip, content) {
+        tooltip.html(`<div data-chart-tooltip-body="true">${content}</div>`);
+        const body = tooltip.select('[data-chart-tooltip-body]');
+        if (body.empty()) {
+            return;
+        }
+        body.style('position', 'relative').style('z-index', '1');
+    }
+    appendTooltipConnector(tooltip, connectorLayout) {
+        const tooltipBackground = this.tooltipTheme?.background ?? '#ffffff';
+        const tooltipBorder = this.tooltipTheme?.border ?? '#dddddd';
+        const connector = tooltip
+            .append('svg')
+            .attr('data-chart-tooltip-connector', 'true')
+            .attr('data-chart-tooltip-arrow-edge', connectorLayout.arrowEdge)
+            .attr('aria-hidden', 'true')
+            .attr('width', connectorLayout.width)
+            .attr('height', connectorLayout.height)
+            .attr('viewBox', `0 0 ${connectorLayout.width} ${connectorLayout.height}`)
+            .style('position', 'absolute')
+            .style('left', `${connectorLayout.left}px`)
+            .style('top', `${connectorLayout.top}px`)
+            .style('pointer-events', 'none')
+            .style('overflow', 'visible')
+            .style('z-index', '0');
+        connector
+            .append('path')
+            .attr('data-chart-tooltip-connector-path', 'true')
+            .attr('d', connectorLayout.path)
+            .attr('fill', 'none')
+            .attr('stroke', tooltipBorder)
+            .attr('stroke-width', 1.25)
+            .attr('stroke-linecap', 'round')
+            .attr('stroke-linejoin', 'round');
+        connector
+            .append('path')
+            .attr('data-chart-tooltip-arrow', 'true')
+            .attr('d', connectorLayout.arrowPath)
+            .attr('fill', tooltipBackground)
+            .attr('stroke', 'none');
+        connector
+            .append('path')
+            .attr('data-chart-tooltip-arrow-base-mask', 'true')
+            .attr('d', connectorLayout.arrowBaseMaskPath)
+            .attr('fill', 'none')
+            .attr('stroke', tooltipBackground)
+            .attr('stroke-width', 2)
+            .attr('stroke-linecap', 'butt');
+        connector
+            .append('path')
+            .attr('data-chart-tooltip-arrow-border', 'true')
+            .attr('d', connectorLayout.arrowBorderPath)
+            .attr('fill', 'none')
+            .attr('stroke', tooltipBorder)
+            .attr('stroke-width', 1)
+            .attr('stroke-linecap', 'round')
+            .attr('stroke-linejoin', 'round');
+    }
+    resolveBarTooltipAnchor(svgNode, dataKey, index) {
+        const barNode = svgNode.querySelector(`.bar-${sanitizeForCSS(dataKey)}[data-index="${index}"]`);
+        if (!barNode) {
+            return null;
+        }
+        const rect = barNode.getBoundingClientRect();
+        if (rect.width > 0 || rect.height > 0) {
+            return {
+                left: rect.left + window.scrollX,
+                right: rect.right + window.scrollX,
+                top: rect.top + window.scrollY,
+                bottom: rect.bottom + window.scrollY,
+                centerX: rect.left + window.scrollX + rect.width / 2,
+                centerY: rect.top + window.scrollY + rect.height / 2,
+            };
+        }
+        const svgRect = svgNode.getBoundingClientRect();
+        const xValue = Number(barNode.getAttribute('x') ?? '0');
+        const yValue = Number(barNode.getAttribute('y') ?? '0');
+        const widthValue = Number(barNode.getAttribute('width') ?? '0');
+        const heightValue = Number(barNode.getAttribute('height') ?? '0');
+        const left = svgRect.left + window.scrollX + xValue;
+        const top = svgRect.top + window.scrollY + yValue;
+        const right = left + widthValue;
+        const bottom = top + heightValue;
+        return {
+            left,
+            right,
+            top,
+            bottom,
+            centerX: left + widthValue / 2,
+            centerY: top + heightValue / 2,
+        };
+    }
+    resolvePointTooltipAnchor(svgNode, isHorizontal, categoryPosition, valuePosition) {
+        if (!Number.isFinite(categoryPosition) ||
+            !Number.isFinite(valuePosition)) {
+            return null;
+        }
+        const svgRect = svgNode.getBoundingClientRect();
+        const anchorX = svgRect.left +
+            window.scrollX +
+            (isHorizontal ? valuePosition : categoryPosition);
+        const anchorY = svgRect.top +
+            window.scrollY +
+            (isHorizontal ? categoryPosition : valuePosition);
+        if (!Number.isFinite(anchorX) || !Number.isFinite(anchorY)) {
+            return null;
+        }
+        return {
+            left: anchorX,
+            right: anchorX,
+            top: anchorY,
+            bottom: anchorY,
+            centerX: anchorX,
+            centerY: anchorY,
+        };
+    }
+    getSplitTooltip(index, theme) {
+        const tooltipId = `${this.splitTooltipOwner}-${index}`;
+        const existingTooltip = select(`#${tooltipId}`);
+        const tooltip = existingTooltip.empty()
+            ? select('body')
+                .append('div')
+                .attr('class', 'chart-tooltip chart-tooltip--split')
+                .attr('id', tooltipId)
+                .attr('data-chart-tooltip-owner', this.splitTooltipOwner)
+                .attr('data-chart-tooltip-index', String(index))
+            : existingTooltip;
+        this.applyTooltipStylesIfNeeded(tooltip, theme);
+        return tooltip;
+    }
+    hideSplitTooltips() {
+        document
+            .querySelectorAll(`[data-chart-tooltip-owner="${this.splitTooltipOwner}"]`)
+            .forEach((node) => {
+            this.hideTooltipElement(node);
+        });
+    }
+    removeSplitTooltips() {
+        document
+            .querySelectorAll(`[data-chart-tooltip-owner="${this.splitTooltipOwner}"]`)
+            .forEach((node) => {
+            node.remove();
+        });
+    }
+    removeRootTooltip() {
         const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
-        if (tooltip.empty()) {
-            this.tooltipDiv = null;
+        if (!tooltip.empty()) {
+            tooltip.remove();
+        }
+    }
+    resolveTooltipArrowEdge(anchor, target, tooltipWidth, tooltipHeight) {
+        if (this.position === 'vertical') {
+            return this.resolveVerticalPlacementArrowEdge(target, tooltipHeight);
+        }
+        return this.resolveSidePlacementArrowEdge(anchor, tooltipWidth);
+    }
+    resolveSidePlacementArrowEdge(anchor, tooltipWidth) {
+        const viewportLeft = window.scrollX + TOOLTIP_VIEWPORT_PADDING_PX + TOOLTIP_OFFSET_PX;
+        const viewportRight = window.scrollX +
+            window.innerWidth -
+            TOOLTIP_VIEWPORT_PADDING_PX -
+            TOOLTIP_OFFSET_PX;
+        const availableRightSpace = viewportRight - anchor.right;
+        const availableLeftSpace = anchor.left - viewportLeft;
+        if (availableRightSpace >= tooltipWidth ||
+            availableRightSpace >= availableLeftSpace) {
+            return 'left';
+        }
+        return 'right';
+    }
+    resolveVerticalPlacementArrowEdge(target, tooltipHeight) {
+        const viewportTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX + TOOLTIP_OFFSET_PX;
+        const viewportBottom = window.scrollY +
+            window.innerHeight -
+            TOOLTIP_VIEWPORT_PADDING_PX -
+            TOOLTIP_OFFSET_PX;
+        const availableTopSpace = target.y - viewportTop;
+        const availableBottomSpace = viewportBottom - target.y;
+        if (availableTopSpace >= tooltipHeight ||
+            availableTopSpace >= availableBottomSpace) {
+            return 'bottom';
+        }
+        return 'top';
+    }
+    resolveSharedTooltipTarget(anchor) {
+        return {
+            x: anchor.centerX,
+            y: anchor.centerY,
+        };
+    }
+    resolveSplitTooltipTarget(currentSeries, anchor) {
+        if (currentSeries.type === 'bar') {
+            return {
+                x: anchor.centerX,
+                y: this.barAnchorPosition === 'top'
+                    ? anchor.top
+                    : anchor.centerY,
+            };
+        }
+        return {
+            x: anchor.centerX,
+            y: anchor.centerY,
+        };
+    }
+    getTooltipConnectorOffset(start, size, target) {
+        const minOffset = TOOLTIP_CONNECTOR_INSET_PX;
+        const maxOffset = Math.max(minOffset, size - minOffset);
+        const preferredOffset = target - start;
+        return Math.max(minOffset, Math.min(preferredOffset, maxOffset));
+    }
+    getAnchoredTooltipPosition(anchor, target, tooltipWidth, tooltipHeight, arrowEdge) {
+        const minLeft = window.scrollX + TOOLTIP_VIEWPORT_PADDING_PX;
+        const maxLeft = window.scrollX +
+            window.innerWidth -
+            tooltipWidth -
+            TOOLTIP_VIEWPORT_PADDING_PX;
+        const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
+        const maxTop = window.scrollY +
+            window.innerHeight -
+            tooltipHeight -
+            TOOLTIP_VIEWPORT_PADDING_PX;
+        let left = target.x - tooltipWidth / 2;
+        let top = target.y - tooltipHeight / 2;
+        if (arrowEdge === 'left') {
+            left = anchor.right + TOOLTIP_OFFSET_PX;
+        }
+        else if (arrowEdge === 'right') {
+            left = anchor.left - tooltipWidth - TOOLTIP_OFFSET_PX;
+        }
+        else if (arrowEdge === 'bottom') {
+            top = target.y - tooltipHeight - TOOLTIP_OFFSET_PX;
+        }
+        else {
+            top = target.y + TOOLTIP_OFFSET_PX;
+        }
+        if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            return null;
+        }
+        return {
+            left: Math.max(minLeft, Math.min(left, maxLeft)),
+            top: Math.max(minTop, Math.min(top, maxTop)),
+        };
+    }
+    resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY) {
+        const localTargetX = targetX - tooltipLeft;
+        const localTargetY = targetY - tooltipTop;
+        if (!Number.isFinite(localTargetX) || !Number.isFinite(localTargetY)) {
+            return null;
+        }
+        const boxArrowPosition = this.resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY);
+        const arrow = this.resolveTooltipBoxArrow(arrowEdge, boxArrowPosition.x, boxArrowPosition.y);
+        const minX = Math.min(arrow.tipX, arrow.baseStartX, arrow.baseEndX, localTargetX) - TOOLTIP_CONNECTOR_PADDING_PX;
+        const maxX = Math.max(arrow.tipX, arrow.baseStartX, arrow.baseEndX, localTargetX) + TOOLTIP_CONNECTOR_PADDING_PX;
+        const minY = Math.min(arrow.tipY, arrow.baseStartY, arrow.baseEndY, localTargetY) - TOOLTIP_CONNECTOR_PADDING_PX;
+        const maxY = Math.max(arrow.tipY, arrow.baseStartY, arrow.baseEndY, localTargetY) + TOOLTIP_CONNECTOR_PADDING_PX;
+        const width = Math.max(1, maxX - minX);
+        const height = Math.max(1, maxY - minY);
+        const boxX = boxArrowPosition.x - minX;
+        const boxY = boxArrowPosition.y - minY;
+        const startX = arrow.tipX - minX;
+        const startY = arrow.tipY - minY;
+        const arrowBaseStartX = arrow.baseStartX - minX;
+        const arrowBaseStartY = arrow.baseStartY - minY;
+        const arrowBaseEndX = arrow.baseEndX - minX;
+        const arrowBaseEndY = arrow.baseEndY - minY;
+        const endX = localTargetX - minX;
+        const endY = localTargetY - minY;
+        const connectorPath = this.resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY);
+        if (!this.hasFiniteNumbers(width, height, boxX, boxY, startX, startY, arrowBaseStartX, arrowBaseStartY, arrowBaseEndX, arrowBaseEndY, endX, endY)) {
+            return null;
+        }
+        return {
+            left: minX,
+            top: minY,
+            arrowEdge,
+            width,
+            height,
+            path: connectorPath,
+            arrowPath: `M ${startX},${startY} L ${arrowBaseStartX},${arrowBaseStartY} L ${arrowBaseEndX},${arrowBaseEndY} Z`,
+            arrowBaseMaskPath: this.resolveTooltipArrowBaseMaskPath(arrowEdge, boxX, boxY, arrowBaseStartX, arrowBaseStartY, arrowBaseEndX, arrowBaseEndY),
+            arrowBorderPath: `M ${arrowBaseStartX},${arrowBaseStartY} L ${startX},${startY} L ${arrowBaseEndX},${arrowBaseEndY}`,
+        };
+    }
+    resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY) {
+        switch (arrowEdge) {
+            case 'left':
+                return {
+                    x: 0,
+                    y: this.getTooltipConnectorOffset(tooltipTop, tooltipHeight, targetY),
+                };
+            case 'right':
+                return {
+                    x: tooltipWidth,
+                    y: this.getTooltipConnectorOffset(tooltipTop, tooltipHeight, targetY),
+                };
+            case 'top':
+                return {
+                    x: this.getTooltipConnectorOffset(tooltipLeft, tooltipWidth, targetX),
+                    y: 0,
+                };
+            case 'bottom':
+                return {
+                    x: this.getTooltipConnectorOffset(tooltipLeft, tooltipWidth, targetX),
+                    y: tooltipHeight,
+                };
+        }
+    }
+    resolveTooltipArrowBaseMaskPath(arrowEdge, boxX, boxY, startX, startY, endX, endY) {
+        if (arrowEdge === 'top') {
+            return `M ${startX - 1},${boxY + 1} L ${endX + 1},${boxY + 1}`;
+        }
+        if (arrowEdge === 'bottom') {
+            return `M ${startX - 1},${boxY - 1} L ${endX + 1},${boxY - 1}`;
+        }
+        if (arrowEdge === 'left') {
+            return `M ${boxX + 1},${startY - 1} L ${boxX + 1},${endY + 1}`;
+        }
+        return `M ${boxX - 1},${startY - 1} L ${boxX - 1},${endY + 1}`;
+    }
+    resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY) {
+        if (arrowEdge === 'left' || arrowEdge === 'right') {
+            if (Math.abs(endY - startY) <=
+                TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX) {
+                return '';
+            }
+            const elbowX = startX + (endX - startX) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
+            return `M ${startX},${startY} L ${elbowX},${startY} L ${endX},${endY}`;
+        }
+        if (Math.abs(endX - startX) <= TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX) {
+            return '';
+        }
+        const elbowY = startY + (endY - startY) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
+        return `M ${startX},${startY} L ${startX},${elbowY} L ${endX},${endY}`;
+    }
+    resolveTooltipBoxArrow(arrowEdge, boxX, boxY) {
+        if (arrowEdge === 'left' || arrowEdge === 'right') {
+            const baseX = boxX;
+            const tipX = arrowEdge === 'left'
+                ? baseX - TOOLTIP_BOX_ARROW_LENGTH_PX
+                : baseX + TOOLTIP_BOX_ARROW_LENGTH_PX;
+            return {
+                tipX,
+                tipY: boxY,
+                baseStartX: baseX,
+                baseStartY: boxY - TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX,
+                baseEndX: baseX,
+                baseEndY: boxY + TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX,
+            };
+        }
+        const baseY = boxY;
+        const tipY = arrowEdge === 'top'
+            ? baseY - TOOLTIP_BOX_ARROW_LENGTH_PX
+            : baseY + TOOLTIP_BOX_ARROW_LENGTH_PX;
+        return {
+            tipX: boxX,
+            tipY,
+            baseStartX: boxX - TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX,
+            baseStartY: baseY,
+            baseEndX: boxX + TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX,
+            baseEndY: baseY,
+        };
+    }
+    hasFiniteNumbers(...values) {
+        return values.every((value) => Number.isFinite(value));
+    }
+    resolveSplitTooltipCollisions(layouts, position, getOppositeArrowEdge) {
+        if (this.position !== position) {
             return;
         }
-        tooltip.style('visibility', 'hidden');
-        this.tooltipDiv = null;
+        const placedLayouts = [];
+        const orderedLayouts = [...layouts].sort((a, b) => a.targetY - b.targetY);
+        orderedLayouts.forEach((layout) => {
+            this.flipTooltipIfItReducesCollisions(layout, placedLayouts, getOppositeArrowEdge);
+            placedLayouts.push(layout);
+        });
+    }
+    getOppositeSideArrowEdge(arrowEdge) {
+        if (arrowEdge === 'left') {
+            return 'right';
+        }
+        if (arrowEdge === 'right') {
+            return 'left';
+        }
+        return null;
+    }
+    getOppositeVerticalArrowEdge(arrowEdge) {
+        if (arrowEdge === 'top') {
+            return 'bottom';
+        }
+        if (arrowEdge === 'bottom') {
+            return 'top';
+        }
+        return null;
+    }
+    flipTooltipIfItReducesCollisions(layout, placedLayouts, getOppositeArrowEdge) {
+        const currentCollisions = this.countSplitTooltipCollisions(layout, placedLayouts);
+        if (currentCollisions === 0) {
+            return;
+        }
+        const flippedArrowEdge = getOppositeArrowEdge(layout.arrowEdge);
+        if (!flippedArrowEdge) {
+            return;
+        }
+        const flippedPosition = this.getAnchoredTooltipPosition(layout.anchor, { x: layout.targetX, y: layout.targetY }, layout.width, layout.height, flippedArrowEdge);
+        if (!flippedPosition) {
+            return;
+        }
+        const flippedLayout = {
+            ...layout,
+            arrowEdge: flippedArrowEdge,
+            left: flippedPosition.left,
+            top: flippedPosition.top,
+        };
+        const flippedCollisions = this.countSplitTooltipCollisions(flippedLayout, placedLayouts);
+        if (flippedCollisions >= currentCollisions) {
+            return;
+        }
+        layout.arrowEdge = flippedArrowEdge;
+        layout.left = flippedPosition.left;
+        layout.top = flippedPosition.top;
+    }
+    countSplitTooltipCollisions(layout, placedLayouts) {
+        return placedLayouts.filter((placedLayout) => this.doSplitTooltipLayoutsOverlap(layout, placedLayout)).length;
+    }
+    doSplitTooltipLayoutsOverlap(a, b) {
+        return (a.left < b.left + b.width + SPLIT_TOOLTIP_GAP_PX &&
+            a.left + a.width + SPLIT_TOOLTIP_GAP_PX > b.left &&
+            a.top < b.top + b.height + SPLIT_TOOLTIP_GAP_PX &&
+            a.top + a.height + SPLIT_TOOLTIP_GAP_PX > b.top);
+    }
+    resolveSplitTooltipPositions(layouts) {
+        const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
+        const maxBottom = window.scrollY + window.innerHeight - TOOLTIP_VIEWPORT_PADDING_PX;
+        const tooltipsByEdge = {
+            left: [],
+            right: [],
+            top: [],
+            bottom: [],
+        };
+        layouts.forEach((layout) => {
+            tooltipsByEdge[layout.arrowEdge].push(layout);
+        });
+        Object.values(tooltipsByEdge).forEach((edgeLayouts) => {
+            if (edgeLayouts.length === 0) {
+                return;
+            }
+            edgeLayouts.sort((a, b) => a.top - b.top);
+            edgeLayouts[0].top = Math.max(minTop, edgeLayouts[0].top);
+            for (let i = 1; i < edgeLayouts.length; i++) {
+                const previousLayout = edgeLayouts[i - 1];
+                const currentLayout = edgeLayouts[i];
+                const minAllowedTop = previousLayout.top +
+                    previousLayout.height +
+                    SPLIT_TOOLTIP_GAP_PX;
+                currentLayout.top = Math.max(currentLayout.top, minAllowedTop);
+            }
+            const lastLayout = edgeLayouts[edgeLayouts.length - 1];
+            const overflow = lastLayout.top + lastLayout.height - maxBottom;
+            if (overflow > 0) {
+                lastLayout.top -= overflow;
+                for (let i = edgeLayouts.length - 2; i >= 0; i--) {
+                    const currentLayout = edgeLayouts[i];
+                    const nextLayout = edgeLayouts[i + 1];
+                    const maxAllowedTop = nextLayout.top -
+                        currentLayout.height -
+                        SPLIT_TOOLTIP_GAP_PX;
+                    currentLayout.top = Math.min(currentLayout.top, maxAllowedTop);
+                }
+                const underflow = minTop - edgeLayouts[0].top;
+                if (underflow > 0) {
+                    edgeLayouts.forEach((layout) => {
+                        layout.top += underflow;
+                    });
+                }
+            }
+            edgeLayouts.forEach((layout) => {
+                const maxTop = maxBottom - layout.height;
+                layout.top = Math.max(minTop, Math.min(layout.top, maxTop));
+            });
+        });
     }
 }
+Object.defineProperty(Tooltip, "nextTooltipId", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 0
+});