@internetstiftelsen/charts 0.15.0 → 0.17.0

package/dist/tooltip.js

@@ -1,29 +1,7 @@
-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_BORDER_WIDTH_PX = 1;
-const TOOLTIP_BOX_ARROW_LENGTH_PX = 10;
-const TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX = 6;
-const TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX = 1;
-const TOOLTIP_CONNECTOR_Z_INDEX = 3;
-const TOOLTIP_ARROW_BORDER_Z_INDEX = 4;
-const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
-const TOOLTIP_BODY_Z_INDEX = 6;
-const TOOLTIP_TOTAL_BORDER_WIDTH_PX = TOOLTIP_BORDER_WIDTH_PX * 2;
-const SPLIT_TOOLTIP_GAP_PX = 8;
-const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
-const DEFAULT_TOOLTIP_TRANSITION = {
-    show: false,
-    duration: 120,
-    easing: 'ease-out',
-};
-const TOOLTIP_HIDDEN_TRANSFORM = 'translateY(2px)';
-const TOOLTIP_VISIBLE_TRANSFORM = 'translateY(0)';
+import { mergeDeep } from './utils.js';
+import { TooltipDom } from './tooltip/dom.js';
+import { attachXYTooltipArea } from './tooltip/xy-interaction.js';
+import { DEFAULT_TOOLTIP_MAX_WIDTH_PX, DEFAULT_TOOLTIP_TRANSITION, } from './tooltip/types.js';
 export class Tooltip {
     constructor(config = {}) {
         Object.defineProperty(this, "id", {
@@ -56,6 +34,12 @@ export class Tooltip {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "colorMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "maxWidth", {
             enumerable: true,
             configurable: true,
@@ -92,37 +76,25 @@ export class Tooltip {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "splitTooltipOwner", {
+        Object.defineProperty(this, "dom", {
             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
-        });
-        Object.defineProperty(this, "tooltipTheme", {
+        Object.defineProperty(this, "detachTooltipScrollListeners", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        const { mode = 'split', position = 'side', barAnchorPosition = 'middle', maxWidth, transition, formatter, labelFormatter, customFormatter, exportHooks, } = config;
+        const { mode = 'split', position = 'auto', barAnchorPosition = 'auto', colorMode = 'theme', maxWidth, 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.colorMode = colorMode;
         this.maxWidth =
             maxWidth !== undefined && Number.isFinite(maxWidth) && maxWidth > 0
                 ? maxWidth
@@ -135,12 +107,19 @@ export class Tooltip {
         this.labelFormatter = labelFormatter;
         this.customFormatter = customFormatter;
         this.exportHooks = exportHooks;
+        this.dom = new TooltipDom({
+            id: this.id,
+            splitTooltipOwner: `${this.id}-split`,
+            maxWidth: this.maxWidth,
+            transition: this.transition,
+        });
     }
     getExportConfig() {
         return {
             mode: this.mode,
             position: this.position,
             barAnchorPosition: this.barAnchorPosition,
+            colorMode: this.colorMode,
             maxWidth: this.maxWidth,
             transition: this.transition,
             formatter: this.formatter,
@@ -156,17 +135,7 @@ export class Tooltip {
         });
     }
     initialize(theme) {
-        const existingTooltip = select(`#${this.id}`);
-        const tooltip = existingTooltip.empty()
-            ? select('body')
-                .append('div')
-                .attr('class', 'chart-tooltip')
-                .attr('id', this.id)
-            : existingTooltip;
-        this.removeSplitTooltips();
-        this.applyTooltipStylesIfNeeded(tooltip, theme);
-        this.tooltipDiv = tooltip;
-        this.hideTooltipSelection(tooltip);
+        this.dom.initialize(theme);
     }
     attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal = false, categoryScaleType = 'band', resolveSeriesValue = (targetSeries, dataPoint) => {
         const rawValue = dataPoint[targetSeries.dataKey];
@@ -175,1409 +144,46 @@ export class Tooltip {
         }
         return parseValue(rawValue);
     }) {
-        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 ||
-                typeof value === 'string' ||
-                typeof value === 'number' ||
-                typeof value === 'boolean' ||
-                value instanceof Date) {
-                return value;
-            }
-            return String(value);
-        };
-        const getCategoryScaleValue = (value, scaleType) => {
-            switch (scaleType) {
-                case 'band':
-                    return String(value);
-                case 'time':
-                    return value instanceof Date
-                        ? value
-                        : new Date(String(value));
-                case 'linear':
-                case 'log':
-                    return typeof value === 'number' ? value : Number(value);
-            }
-        };
-        const getXPosition = (dataPoint) => {
-            const scaled = x(getCategoryScaleValue(dataPoint[xKey], categoryScaleType));
-            return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
-        };
-        const getYPosition = (dataPoint) => {
-            const scaled = y(getCategoryScaleValue(dataPoint[xKey], categoryScaleType));
-            return (scaled || 0) + (y.bandwidth ? y.bandwidth() / 2 : 0);
-        };
-        const stripHtml = (content) => {
-            return content
-                .replace(/<br\s*\/?>/gi, '. ')
-                .replace(/<[^>]+>/g, ' ')
-                .replace(/\s+/g, ' ')
-                .trim();
-        };
-        const buildTooltipLabel = (dataPoint) => {
-            const labelValue = dataPoint[xKey];
-            return labelFormatter
-                ? labelFormatter(String(labelValue), dataPoint)
-                : String(labelValue);
-        };
-        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 customFormatter(dataPoint, series);
-            }
-            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 &&
-                element.classList.contains('tooltip-focus-target'));
-        };
-        const dataPointPositions = data.map((dataPoint) => isHorizontal ? getYPosition(dataPoint) : getXPosition(dataPoint));
-        const getClosestIndexFromPointer = (mouseX, mouseY) => {
-            const pointerPosition = isHorizontal ? mouseY : mouseX;
-            let closestIndex = 0;
-            let minDistance = Math.abs(pointerPosition - dataPointPositions[0]);
-            for (let i = 1; i < dataPointPositions.length; i++) {
-                const distance = Math.abs(pointerPosition - dataPointPositions[i]);
-                if (distance < minDistance) {
-                    minDistance = distance;
-                    closestIndex = i;
-                }
-            }
-            return closestIndex;
-        };
-        const overlay = svg
-            .append('rect')
-            .attr('class', 'tooltip-overlay')
-            .attr('x', plotArea.left)
-            .attr('y', plotArea.top)
-            .attr('width', plotArea.width)
-            .attr('height', plotArea.height)
-            .attr('aria-hidden', 'true')
-            .style('fill', 'none')
-            .style('pointer-events', 'all');
-        const focusCircleSeries = series.filter((currentSeries) => {
-            if (currentSeries.type === 'line' &&
-                currentSeries.points.show === 'never') {
-                return false;
-            }
-            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 = focusCircleSeries.map((currentSeries) => {
-            const seriesColor = getSeriesColor(currentSeries);
-            return svg
-                .append('circle')
-                .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)
-                .attr('stroke-width', theme.line.point.strokeWidth)
-                .attr('aria-hidden', 'true')
-                .style('opacity', 0)
-                .style('pointer-events', 'none');
-        });
-        const clearVisualState = () => {
-            focusCircles.forEach((circle) => circle.style('opacity', 0));
-            if (!hasBarSeries) {
-                return;
-            }
-            barSeries.forEach((currentSeries) => {
-                svg.selectAll(`.bar-${sanitizeForCSS(currentSeries.dataKey)}`).style('opacity', 1);
-            });
-        };
-        const updateVisualStateAtIndex = (closestIndex) => {
-            const dataPoint = data[closestIndex];
-            const dataPointPosition = dataPointPositions[closestIndex];
-            focusCircleSeries.forEach((currentSeries, seriesIndex) => {
-                const value = resolveSeriesValue(currentSeries, dataPoint, closestIndex);
-                if (!Number.isFinite(value)) {
-                    focusCircles[seriesIndex].style('opacity', 0);
-                    return;
-                }
-                if (isHorizontal) {
-                    focusCircles[seriesIndex]
-                        .attr('cx', x(value) ?? 0)
-                        .attr('cy', dataPointPosition)
-                        .style('opacity', 1);
-                    return;
-                }
-                focusCircles[seriesIndex]
-                    .attr('cx', dataPointPosition)
-                    .attr('cy', y(value) ?? 0)
-                    .style('opacity', 1);
-            });
-            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;
-            }
-            const svgRect = svg.node().getBoundingClientRect();
-            const values = series.map((currentSeries) => resolveSeriesValue(currentSeries, dataPoint, closestIndex));
-            const finiteValues = values.filter((value) => Number.isFinite(value));
-            const minValue = finiteValues.length
-                ? Math.min(...finiteValues)
-                : 0;
-            const maxValue = finiteValues.length
-                ? Math.max(...finiteValues)
-                : 0;
-            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 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 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;
-                }
-                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;
-            }
-            this.resolveSplitTooltipPositions(layouts, isHorizontal);
-            layouts.forEach((layout) => {
-                this.renderTooltipWithConnector(layout.div, layout.arrowEdge, layout.left, layout.top, layout.width, layout.height, layout.targetX, layout.targetY, layout.anchor);
-            });
-        };
-        const hideTooltip = () => {
-            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) {
-                    const targetHeight = y.bandwidth();
-                    return {
-                        x: plotArea.left,
-                        y: dataPointPositions[index] - targetHeight / 2,
-                        width: plotArea.width,
-                        height: targetHeight,
-                    };
-                }
-                const top = index === 0
-                    ? plotArea.top
-                    : (dataPointPositions[index - 1] +
-                        dataPointPositions[index]) /
-                        2;
-                const bottom = index === dataPointPositions.length - 1
-                    ? plotArea.bottom
-                    : (dataPointPositions[index] +
-                        dataPointPositions[index + 1]) /
-                        2;
-                return {
-                    x: plotArea.left,
-                    y: top,
-                    width: plotArea.width,
-                    height: bottom - top,
-                };
-            }
-            if (x.bandwidth) {
-                const targetWidth = x.bandwidth();
-                return {
-                    x: dataPointPositions[index] - targetWidth / 2,
-                    y: plotArea.top,
-                    width: targetWidth,
-                    height: plotArea.height,
-                };
-            }
-            const left = index === 0
-                ? plotArea.left
-                : (dataPointPositions[index - 1] +
-                    dataPointPositions[index]) /
-                    2;
-            const right = index === dataPointPositions.length - 1
-                ? plotArea.right
-                : (dataPointPositions[index] +
-                    dataPointPositions[index + 1]) /
-                    2;
-            return {
-                x: left,
-                y: plotArea.top,
-                width: right - left,
-                height: plotArea.height,
-            };
-        };
-        overlay
-            .on('mousemove', (event) => {
-            const [mouseX, mouseY] = pointer(event, svg.node());
-            const closestIndex = getClosestIndexFromPointer(mouseX, mouseY);
-            requestTooltipRenderAtIndex(closestIndex);
-        })
-            .on('mouseout', () => {
-            if (isTooltipFocusTarget(document.activeElement)) {
-                return;
-            }
-            cancelPendingTooltipRender();
-            hideTooltip();
-        });
-        const focusTargets = svg
-            .append('g')
-            .attr('class', 'tooltip-focus-targets')
-            .selectAll('rect')
-            .data(data)
-            .join('rect')
-            .attr('class', 'tooltip-focus-target')
-            .attr('data-index', (_, i) => i)
-            .attr('x', (_, i) => getFocusTargetBounds(i).x)
-            .attr('y', (_, i) => getFocusTargetBounds(i).y)
-            .attr('width', (_, i) => getFocusTargetBounds(i).width)
-            .attr('height', (_, i) => getFocusTargetBounds(i).height)
-            .attr('tabindex', 0)
-            .attr('fill', 'transparent')
-            .attr('stroke', 'none')
-            .attr('stroke-width', 0)
-            .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);
-            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) {
-            const currentIndex = focusTargetNodes.indexOf(this);
-            if (currentIndex === -1) {
-                return;
-            }
-            const nextIndex = getNextFocusTargetIndex(currentIndex, event.key);
-            if (nextIndex < 0 || nextIndex >= focusTargetNodes.length) {
-                return;
-            }
-            event.preventDefault();
-            focusTargetNodes[nextIndex].focus();
+        this.detachTooltipScrollListeners?.();
+        this.detachTooltipScrollListeners = attachXYTooltipArea({
+            svg,
+            data,
+            series,
+            xKey,
+            x,
+            y,
+            theme,
+            plotArea,
+            parseValue,
+            isHorizontal,
+            categoryScaleType,
+            resolveSeriesValue,
+            mode: this.mode,
+            position: this.position,
+            barAnchorPosition: this.barAnchorPosition,
+            colorMode: this.colorMode,
+            formatter: this.formatter,
+            labelFormatter: this.labelFormatter,
+            customFormatter: this.customFormatter,
+            dom: this.dom,
         });
     }
     setContent(content) {
-        if (!this.tooltipDiv) {
-            return;
-        }
-        this.setTooltipMarkup(this.tooltipDiv, content);
+        this.dom.setContent(content);
     }
     getBounds() {
-        const node = this.tooltipDiv?.node();
-        if (!node) {
-            return null;
-        }
-        return node.getBoundingClientRect();
+        return this.dom.getBounds();
     }
     showAt(left, top) {
-        if (!this.tooltipDiv) {
-            return;
-        }
-        if (!Number.isFinite(left) || !Number.isFinite(top)) {
-            this.hide();
-            return;
-        }
-        this.showTooltipAt(this.tooltipDiv, left, top);
+        this.dom.showAt(left, top);
     }
     hide() {
-        const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
-        if (!tooltip.empty()) {
-            this.hideTooltipSelection(tooltip);
-        }
-        this.hideSplitTooltips();
+        this.dom.hide();
     }
     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.maxWidth,
-            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', `${TOOLTIP_BORDER_WIDTH_PX}px 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('box-sizing', 'border-box')
-            .style('overflow-wrap', 'break-word')
-            .style('overflow', 'visible')
-            .style('isolation', 'isolate')
-            .style('pointer-events', 'none')
-            .style('z-index', '1000');
-        tooltip.style('max-width', `${this.maxWidth}px`);
-        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, anchor) {
-        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, anchor);
-        if (!connectorLayout) {
-            this.hideTooltipSelection(tooltip);
-            return;
-        }
-        this.appendTooltipConnector(tooltip, connectorLayout);
-        this.appendTooltipArrow(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', String(TOOLTIP_BODY_Z_INDEX));
-    }
-    appendTooltipConnector(tooltip, connectorLayout) {
-        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', String(TOOLTIP_CONNECTOR_Z_INDEX));
-        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');
-    }
-    appendTooltipArrow(tooltip, connectorLayout) {
-        const tooltipBackground = this.tooltipTheme?.background ?? '#ffffff';
-        const tooltipBorder = this.tooltipTheme?.border ?? '#dddddd';
-        this.appendTooltipArrowTriangle(tooltip, connectorLayout, 'data-chart-tooltip-arrow', tooltipBorder, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX, TOOLTIP_ARROW_BORDER_Z_INDEX);
-        this.appendTooltipArrowTriangle(tooltip, connectorLayout, 'data-chart-tooltip-arrow-fill', tooltipBackground, TOOLTIP_BOX_ARROW_LENGTH_PX - 1, TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX - 1, TOOLTIP_ARROW_FILL_Z_INDEX);
-    }
-    appendTooltipArrowTriangle(tooltip, connectorLayout, dataAttribute, color, length, halfHeight, zIndex) {
-        const position = this.resolveTooltipArrowPosition(connectorLayout.arrowEdge, connectorLayout.arrowX, connectorLayout.arrowY, length, halfHeight);
-        const arrow = tooltip
-            .append('div')
-            .attr(dataAttribute, 'true')
-            .attr('data-chart-tooltip-arrow-edge', connectorLayout.arrowEdge)
-            .attr('aria-hidden', 'true')
-            .style('position', 'absolute')
-            .style('left', `${position.left}px`)
-            .style('top', `${position.top}px`)
-            .style('width', '0')
-            .style('height', '0')
-            .style('pointer-events', 'none')
-            .style('z-index', String(zIndex));
-        if (connectorLayout.arrowEdge === 'left') {
-            arrow
-                .style('border-top', `${halfHeight}px solid transparent`)
-                .style('border-bottom', `${halfHeight}px solid transparent`)
-                .style('border-right', `${length}px solid ${color}`);
-            return;
-        }
-        if (connectorLayout.arrowEdge === 'right') {
-            arrow
-                .style('border-top', `${halfHeight}px solid transparent`)
-                .style('border-bottom', `${halfHeight}px solid transparent`)
-                .style('border-left', `${length}px solid ${color}`);
-            return;
-        }
-        if (connectorLayout.arrowEdge === 'top') {
-            arrow
-                .style('border-left', `${halfHeight}px solid transparent`)
-                .style('border-right', `${halfHeight}px solid transparent`)
-                .style('border-bottom', `${length}px solid ${color}`);
-            return;
-        }
-        arrow
-            .style('border-left', `${halfHeight}px solid transparent`)
-            .style('border-right', `${halfHeight}px solid transparent`)
-            .style('border-top', `${length}px solid ${color}`);
-    }
-    resolveTooltipArrowPosition(arrowEdge, boxX, boxY, length, halfHeight) {
-        switch (arrowEdge) {
-            case 'left':
-                return {
-                    left: boxX - length,
-                    top: boxY - halfHeight,
-                };
-            case 'right':
-                return {
-                    left: boxX,
-                    top: boxY - halfHeight,
-                };
-            case 'top':
-                return {
-                    left: boxX - halfHeight,
-                    top: boxY - length,
-                };
-            case 'bottom':
-                return {
-                    left: boxX - halfHeight,
-                    top: boxY,
-                };
-        }
-    }
-    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()) {
-            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, anchor) {
-        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 arrowTip = this.resolveTooltipArrowTip(arrowEdge, boxArrowPosition.x, boxArrowPosition.y, TOOLTIP_BOX_ARROW_LENGTH_PX);
-        const minX = Math.min(arrowTip.x, localTargetX) - TOOLTIP_CONNECTOR_PADDING_PX;
-        const maxX = Math.max(arrowTip.x, localTargetX) + TOOLTIP_CONNECTOR_PADDING_PX;
-        const minY = Math.min(arrowTip.y, localTargetY) - TOOLTIP_CONNECTOR_PADDING_PX;
-        const maxY = Math.max(arrowTip.y, 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 = arrowTip.x - minX;
-        const startY = arrowTip.y - minY;
-        const endX = localTargetX - minX;
-        const endY = localTargetY - minY;
-        const arrowTipX = tooltipLeft + arrowTip.x;
-        const arrowTipY = tooltipTop + arrowTip.y;
-        const connectorPath = this.resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor);
-        if (!this.hasFiniteNumbers(width, height, boxX, boxY, startX, startY, endX, endY)) {
-            return null;
-        }
-        return {
-            left: minX,
-            top: minY,
-            arrowEdge,
-            width,
-            height,
-            path: connectorPath,
-            arrowX: boxArrowPosition.x,
-            arrowY: boxArrowPosition.y,
-        };
-    }
-    resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY) {
-        // Arrow offsets are relative to the padding box, while measured
-        // tooltip dimensions include both borders.
-        const rightInnerBorderX = tooltipWidth - TOOLTIP_TOTAL_BORDER_WIDTH_PX;
-        const bottomInnerBorderY = tooltipHeight - TOOLTIP_TOTAL_BORDER_WIDTH_PX;
-        switch (arrowEdge) {
-            case 'left':
-                return {
-                    x: 0,
-                    y: this.getTooltipConnectorOffset(tooltipTop, tooltipHeight, targetY),
-                };
-            case 'right':
-                return {
-                    x: rightInnerBorderX,
-                    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: bottomInnerBorderY,
-                };
-        }
-    }
-    resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor) {
-        if (arrowEdge === 'left' || arrowEdge === 'right') {
-            if (this.isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor)) {
-                return '';
-            }
-            const elbowX = startX + (endX - startX) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
-            return `M ${startX},${startY} L ${elbowX},${startY} L ${endX},${endY}`;
-        }
-        if (this.isTooltipArrowTipInsideHorizontalAnchorSpan(arrowTipX, anchor)) {
-            return '';
-        }
-        const elbowY = startY + (endY - startY) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
-        return `M ${startX},${startY} L ${startX},${elbowY} L ${endX},${endY}`;
-    }
-    isTooltipArrowTipInsideHorizontalAnchorSpan(arrowTipX, anchor) {
-        return (arrowTipX >=
-            anchor.left - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
-            arrowTipX <= anchor.right + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
-    }
-    isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor) {
-        return (arrowTipY >=
-            anchor.top - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
-            arrowTipY <=
-                anchor.bottom + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
-    }
-    resolveTooltipArrowTip(arrowEdge, boxX, boxY, length) {
-        if (arrowEdge === 'left' || arrowEdge === 'right') {
-            return {
-                x: arrowEdge === 'left' ? boxX - length : boxX + length,
-                y: boxY,
-            };
-        }
-        return {
-            x: boxX,
-            y: arrowEdge === 'top' ? boxY - length : boxY + length,
-        };
-    }
-    hasFiniteNumbers(...values) {
-        return values.every((value) => Number.isFinite(value));
-    }
-    resolveSplitTooltipCollisions(layouts, position, getOppositeArrowEdge) {
-        if (this.position !== position) {
-            return;
-        }
-        const placedLayouts = [];
-        const orderedLayouts = [...layouts].sort((a, b) => {
-            if (position === 'vertical') {
-                return a.targetX - b.targetX || a.targetY - b.targetY;
-            }
-            return a.targetY - b.targetY || a.targetX - b.targetX;
-        });
-        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;
-        }
-        if (flippedCollisions === currentCollisions &&
-            this.countPlacedLayoutsOnEdge(placedLayouts, flippedArrowEdge) >=
-                this.countPlacedLayoutsOnEdge(placedLayouts, layout.arrowEdge)) {
-            return;
-        }
-        layout.arrowEdge = flippedArrowEdge;
-        layout.left = flippedPosition.left;
-        layout.top = flippedPosition.top;
-    }
-    countSplitTooltipCollisions(layout, placedLayouts) {
-        return placedLayouts.filter((placedLayout) => this.doSplitTooltipLayoutsOverlap(layout, placedLayout)).length;
-    }
-    countPlacedLayoutsOnEdge(placedLayouts, arrowEdge) {
-        return placedLayouts.filter((layout) => layout.arrowEdge === arrowEdge)
-            .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, isHorizontal) {
-        if (isHorizontal) {
-            this.resolveHorizontalChartSplitTooltipPositions(layouts);
-            return;
-        }
-        this.resolveVerticalChartSplitTooltipPositions(layouts);
-    }
-    resolveHorizontalChartSplitTooltipPositions(layouts) {
-        if (this.position === 'vertical') {
-            this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
-            this.resolveHorizontalChartAboveBelowSplitTooltipPositions(layouts);
-            return;
-        }
-        this.resolveHorizontalSideSplitTooltipPositions(layouts);
-    }
-    resolveVerticalChartSplitTooltipPositions(layouts) {
-        if (this.position === 'vertical') {
-            this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
-            this.resolveVerticalChartAboveBelowSplitTooltipPositions(layouts);
-            return;
-        }
-        this.resolveSplitTooltipCollisions(layouts, 'side', this.getOppositeSideArrowEdge);
-        this.resolveSideSplitTooltipPositions(layouts);
-    }
-    getSplitTooltipViewportBounds() {
-        return {
-            minLeft: window.scrollX + TOOLTIP_VIEWPORT_PADDING_PX,
-            maxRight: window.scrollX +
-                window.innerWidth -
-                TOOLTIP_VIEWPORT_PADDING_PX,
-            minTop: window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX,
-            maxBottom: window.scrollY +
-                window.innerHeight -
-                TOOLTIP_VIEWPORT_PADDING_PX,
-        };
-    }
-    groupSplitTooltipLayoutsByEdge(layouts) {
-        const tooltipsByEdge = {
-            left: [],
-            right: [],
-            top: [],
-            bottom: [],
-        };
-        layouts.forEach((layout) => {
-            tooltipsByEdge[layout.arrowEdge].push(layout);
-        });
-        return tooltipsByEdge;
-    }
-    resolveSideSplitTooltipPositions(layouts) {
-        const { minTop, maxBottom } = this.getSplitTooltipViewportBounds();
-        const tooltipsByEdge = this.groupSplitTooltipLayoutsByEdge(layouts);
-        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));
-            });
-        });
-    }
-    resolveHorizontalSideSplitTooltipPositions(layouts) {
-        this.resolveHorizontalSideSplitTooltipCollisions(layouts);
-        const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
-        const maxBottom = window.scrollY + window.innerHeight - TOOLTIP_VIEWPORT_PADDING_PX;
-        const lanes = [];
-        const orderedLayouts = [...layouts].sort((a, b) => a.targetX - b.targetX || a.left - b.left);
-        orderedLayouts.forEach((layout) => {
-            const maxTop = maxBottom - layout.height;
-            const preferredTop = Math.max(minTop, Math.min(layout.top, maxTop));
-            const reusableLane = this.findReusableHorizontalTooltipLane(lanes, layout, preferredTop);
-            if (reusableLane) {
-                this.assignLayoutToHorizontalTooltipLane(layout, reusableLane);
-                return;
-            }
-            const nextLane = {
-                top: this.resolveNewHorizontalTooltipLaneTop(preferredTop, layout.height, minTop, maxTop, lanes),
-                layouts: [],
-            };
-            lanes.push(nextLane);
-            this.assignLayoutToHorizontalTooltipLane(layout, nextLane);
-        });
-    }
-    resolveHorizontalSideSplitTooltipCollisions(layouts) {
-        const placedLayouts = [];
-        const orderedLayouts = [...layouts].sort((a, b) => a.targetX - b.targetX || a.left - b.left);
-        orderedLayouts.forEach((layout) => {
-            this.flipHorizontalSideTooltipIfItReducesCollisions(layout, placedLayouts);
-            placedLayouts.push(layout);
-        });
-    }
-    flipHorizontalSideTooltipIfItReducesCollisions(layout, placedLayouts) {
-        const currentCollisions = this.countSplitTooltipCollisions(layout, placedLayouts);
-        if (currentCollisions === 0) {
-            return;
-        }
-        const flippedArrowEdge = this.getOppositeSideArrowEdge(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;
-        }
-        if (flippedCollisions === currentCollisions &&
-            this.countPlacedLayoutsOnEdge(placedLayouts, flippedArrowEdge) >=
-                this.countPlacedLayoutsOnEdge(placedLayouts, layout.arrowEdge)) {
-            return;
-        }
-        layout.arrowEdge = flippedArrowEdge;
-        layout.left = flippedPosition.left;
-        layout.top = flippedPosition.top;
-    }
-    findReusableHorizontalTooltipLane(lanes, layout, preferredTop) {
-        const reusableLanes = lanes
-            .filter((lane) => lane.layouts.every((placedLayout) => !this.doSplitTooltipLayoutsOverlapHorizontally(layout, placedLayout)))
-            .sort((a, b) => Math.abs(a.top - preferredTop) -
-            Math.abs(b.top - preferredTop));
-        return reusableLanes[0] ?? null;
-    }
-    resolveNewHorizontalTooltipLaneTop(preferredTop, tooltipHeight, minTop, maxTop, lanes) {
-        const usedTops = new Set(lanes.map((lane) => Math.round(lane.top)));
-        const candidates = this.getHorizontalTooltipLaneTopCandidates(preferredTop, tooltipHeight, minTop, maxTop);
-        return (candidates.find((candidate) => !usedTops.has(Math.round(candidate)) &&
-            lanes.every((lane) => !this.doHorizontalTooltipLanesOverlap(candidate, tooltipHeight, lane))) ??
-            candidates[0] ??
-            preferredTop);
-    }
-    getHorizontalTooltipLaneTopCandidates(preferredTop, tooltipHeight, minTop, maxTop) {
-        const step = tooltipHeight + SPLIT_TOOLTIP_GAP_PX;
-        const candidates = [preferredTop];
-        for (let index = 1; index <= 8; index++) {
-            candidates.push(preferredTop - step * index);
-            candidates.push(preferredTop + step * index);
-        }
-        return Array.from(new Set(candidates.map((candidate) => Math.round(Math.max(minTop, Math.min(candidate, maxTop)))))).sort((a, b) => Math.abs(a - preferredTop) - Math.abs(b - preferredTop));
-    }
-    assignLayoutToHorizontalTooltipLane(layout, lane) {
-        layout.top = lane.top;
-        lane.layouts.push(layout);
-    }
-    doHorizontalTooltipLanesOverlap(top, height, lane) {
-        const laneHeight = lane.layouts.reduce((maxHeight, layout) => Math.max(maxHeight, layout.height), 0);
-        return (top < lane.top + laneHeight + SPLIT_TOOLTIP_GAP_PX &&
-            top + height + SPLIT_TOOLTIP_GAP_PX > lane.top);
-    }
-    doSplitTooltipLayoutsOverlapHorizontally(a, b) {
-        return (a.left < b.left + b.width + SPLIT_TOOLTIP_GAP_PX &&
-            a.left + a.width + SPLIT_TOOLTIP_GAP_PX > b.left);
-    }
-    resolveHorizontalChartAboveBelowSplitTooltipPositions(layouts) {
-        const bounds = this.getSplitTooltipViewportBounds();
-        const tooltipsByEdge = this.groupSplitTooltipLayoutsByEdge(layouts);
-        this.resolvePackedAboveBelowTooltipRow(tooltipsByEdge.top, bounds);
-        this.resolvePackedAboveBelowTooltipRow(tooltipsByEdge.bottom, bounds);
-        this.resolveSideSplitTooltipPositions([
-            ...tooltipsByEdge.left,
-            ...tooltipsByEdge.right,
-        ]);
-    }
-    resolvePackedAboveBelowTooltipRow(layouts, bounds) {
-        if (layouts.length === 0) {
-            return;
-        }
-        const orderedLayouts = [...layouts].sort((a, b) => a.left - b.left || a.targetX - b.targetX);
-        orderedLayouts.forEach((layout) => {
-            const maxTop = Math.max(bounds.minTop, bounds.maxBottom - layout.height);
-            layout.top = Math.max(bounds.minTop, Math.min(layout.top, maxTop));
-        });
-        const firstLayout = orderedLayouts[0];
-        const firstMaxLeft = Math.max(bounds.minLeft, bounds.maxRight - firstLayout.width);
-        firstLayout.left = Math.max(bounds.minLeft, Math.min(firstLayout.left, firstMaxLeft));
-        for (let i = 1; i < orderedLayouts.length; i++) {
-            const previousLayout = orderedLayouts[i - 1];
-            const currentLayout = orderedLayouts[i];
-            const minAllowedLeft = previousLayout.left +
-                previousLayout.width +
-                SPLIT_TOOLTIP_GAP_PX;
-            currentLayout.left = Math.max(currentLayout.left, minAllowedLeft);
-        }
-        const lastLayout = orderedLayouts[orderedLayouts.length - 1];
-        const overflow = lastLayout.left + lastLayout.width - bounds.maxRight;
-        if (overflow > 0) {
-            lastLayout.left -= overflow;
-            for (let i = orderedLayouts.length - 2; i >= 0; i--) {
-                const currentLayout = orderedLayouts[i];
-                const nextLayout = orderedLayouts[i + 1];
-                const maxAllowedLeft = nextLayout.left -
-                    currentLayout.width -
-                    SPLIT_TOOLTIP_GAP_PX;
-                currentLayout.left = Math.min(currentLayout.left, maxAllowedLeft);
-            }
-            const underflow = bounds.minLeft - orderedLayouts[0].left;
-            if (underflow > 0) {
-                orderedLayouts.forEach((layout) => {
-                    layout.left += underflow;
-                });
-            }
-        }
-        orderedLayouts.forEach((layout) => {
-            const maxLeft = Math.max(bounds.minLeft, bounds.maxRight - layout.width);
-            layout.left = Math.max(bounds.minLeft, Math.min(layout.left, maxLeft));
-        });
-    }
-    resolveVerticalChartAboveBelowSplitTooltipPositions(layouts) {
-        const bounds = this.getSplitTooltipViewportBounds();
-        const tooltipsByEdge = this.groupSplitTooltipLayoutsByEdge(layouts);
-        this.resolveCollisionAwareAboveBelowTooltipPositions(tooltipsByEdge.top, bounds);
-        this.resolveCollisionAwareAboveBelowTooltipPositions(tooltipsByEdge.bottom, bounds);
-        this.resolveSideSplitTooltipPositions([
-            ...tooltipsByEdge.left,
-            ...tooltipsByEdge.right,
-        ]);
-    }
-    resolveCollisionAwareAboveBelowTooltipPositions(layouts, bounds) {
-        const placedLayouts = [];
-        const orderedLayouts = [...layouts].sort((a, b) => a.left - b.left || a.top - b.top);
-        orderedLayouts.forEach((layout) => {
-            const maxLeft = Math.max(bounds.minLeft, bounds.maxRight - layout.width);
-            const maxTop = Math.max(bounds.minTop, bounds.maxBottom - layout.height);
-            layout.top = Math.max(bounds.minTop, Math.min(layout.top, maxTop));
-            layout.left = this.resolveNonOverlappingAboveBelowTooltipLeft(layout, placedLayouts, bounds.minLeft, maxLeft);
-            placedLayouts.push(layout);
-        });
-    }
-    resolveNonOverlappingAboveBelowTooltipLeft(layout, placedLayouts, minLeft, maxLeft) {
-        const preferredLeft = Math.max(minLeft, Math.min(layout.left, maxLeft));
-        if (!this.doesSplitTooltipOverlapPlacedLayouts({ ...layout, left: preferredLeft }, placedLayouts)) {
-            return preferredLeft;
-        }
-        const candidates = placedLayouts.flatMap((placedLayout) => [
-            placedLayout.left + placedLayout.width + SPLIT_TOOLTIP_GAP_PX,
-            placedLayout.left - layout.width - SPLIT_TOOLTIP_GAP_PX,
-        ]);
-        return (Array.from(new Set(candidates.map((candidate) => Math.round(Math.max(minLeft, Math.min(candidate, maxLeft))))))
-            .sort((a, b) => Math.abs(a - preferredLeft) -
-            Math.abs(b - preferredLeft))
-            .find((candidate) => !this.doesSplitTooltipOverlapPlacedLayouts({ ...layout, left: candidate }, placedLayouts)) ?? preferredLeft);
-    }
-    doesSplitTooltipOverlapPlacedLayouts(layout, placedLayouts) {
-        return placedLayouts.some((placedLayout) => this.doSplitTooltipLayoutsOverlap(layout, placedLayout));
+        this.detachTooltipScrollListeners?.();
+        this.detachTooltipScrollListeners = null;
+        this.dom.cleanup();
     }
 }
 Object.defineProperty(Tooltip, "nextTooltipId", {