react-tooltip 6.0.0-beta.1179.rc.2 → 6.0.0-beta.1179.rc.21

package/dist/react-tooltip.mjs

@@ -5,9 +5,10 @@
 * @copyright ReactTooltip Team
 * @license MIT
 */
-import React, { useLayoutEffect, useEffect, useRef, useState, useCallback, useImperativeHandle } from 'react';
-import { arrow, computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
+import React, { useLayoutEffect, useEffect, useState, useRef, useMemo, memo, useCallback, useImperativeHandle } from 'react';
 import clsx from 'clsx';
+import { createPortal } from 'react-dom';
+import { flip, shift, arrow, computePosition, offset, autoUpdate } from '@floating-ui/dom';
 
 // This is the ID for the core styles of ReactTooltip
 const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles';
@@ -17,27 +18,33 @@ const injected = {
     core: false,
     base: false,
 };
-function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', ref, }) {
-    var _a, _b;
-    if (!css || typeof document === 'undefined' || injected[type]) {
+/**
+ * Note about `state` parameter:
+ * This parameter is used to keep track of the state of the styles
+ * into the tests since the const `injected` is not acessible or resettable in the tests
+ */
+function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', ref, state = {}, }) {
+    if (!css ||
+        typeof document === 'undefined' ||
+        (typeof state[type] !== 'undefined' ? state[type] : injected[type])) {
         return;
     }
     if (type === 'core' &&
         typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?`
-        ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.REACT_TOOLTIP_DISABLE_CORE_STYLES)) {
+        process.env &&
+        process.env.REACT_TOOLTIP_DISABLE_CORE_STYLES) {
         return;
     }
-    if (type !== 'base' &&
+    if (type === 'base' &&
         typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?`
-        ((_b = process === null || process === void 0 ? void 0 : process.env) === null || _b === void 0 ? void 0 : _b.REACT_TOOLTIP_DISABLE_BASE_STYLES)) {
+        process.env &&
+        process.env.REACT_TOOLTIP_DISABLE_BASE_STYLES) {
         return;
     }
     if (type === 'core') {
-        // eslint-disable-next-line no-param-reassign
         id = REACT_TOOLTIP_CORE_STYLES_ID;
     }
     if (!ref) {
-        // eslint-disable-next-line no-param-reassign
         ref = {};
     }
     const { insertAt } = ref;
@@ -67,26 +74,27 @@ function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', re
     else {
         style.appendChild(document.createTextNode(css));
     }
-    injected[type] = true;
+    if (typeof state[type] !== 'undefined') {
+        state[type] = true;
+    }
+    else {
+        injected[type] = true; // internal global state that jest doesn't have access
+    }
 }
 
-const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [
-    offset(Number(offsetValue)),
-    flip({
-        fallbackAxisSideDirection: 'start',
-    }),
-    shift({ padding: 5 }),
-], border, }) => {
+// Hoisted constant middlewares — these configs never change
+const defaultFlip = flip({ fallbackAxisSideDirection: 'start' });
+const defaultShift = shift({ padding: 5 });
+const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [offset(Number(offsetValue)), defaultFlip, defaultShift], border, arrowSize = 8, }) => {
     if (!elementReference) {
         // elementReference can be null or undefined and we will not compute the position
-        // eslint-disable-next-line no-console
         // console.error('The reference element for tooltip was not defined: ', elementReference)
         return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
     }
     if (tooltipReference === null) {
         return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
     }
-    const middleware = middlewares;
+    const middleware = [...middlewares];
     if (tooltipArrowReference) {
         middleware.push(arrow({ element: tooltipArrowReference, padding: 5 }));
         return computePosition(elementReference, tooltipReference, {
@@ -130,7 +138,7 @@ const computeTooltipPosition = async ({ elementReference = null, tooltipReferenc
                 right: '',
                 bottom: '',
                 ...borderSide,
-                [staticSide]: `-${4 + borderWidth}px`,
+                [staticSide]: `-${arrowSize / 2 + borderWidth - 1}px`,
             };
             /* c8 ignore end */
             return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
@@ -164,6 +172,7 @@ const cssTimeToMs = (time) => {
  */
 const debounce = (func, wait, immediate) => {
     let timeout = null;
+    let currentFunc = func;
     const debounced = function debounced(...args) {
         const later = () => {
             timeout = null;
@@ -173,7 +182,7 @@ const debounce = (func, wait, immediate) => {
              * there's no need to clear the timeout
              * since we expect it to resolve and set `timeout = null`
              */
-            func.apply(this, args);
+            currentFunc.apply(this, args);
             timeout = setTimeout(later, wait);
         }
     };
@@ -186,36 +195,12 @@ const debounce = (func, wait, immediate) => {
         clearTimeout(timeout);
         timeout = null;
     };
+    debounced.setCallback = (newFunc) => {
+        currentFunc = newFunc;
+    };
     return debounced;
 };
 
-const isObject = (object) => {
-    return object !== null && !Array.isArray(object) && typeof object === 'object';
-};
-const deepEqual = (object1, object2) => {
-    if (object1 === object2) {
-        return true;
-    }
-    if (Array.isArray(object1) && Array.isArray(object2)) {
-        if (object1.length !== object2.length) {
-            return false;
-        }
-        return object1.every((val, index) => deepEqual(val, object2[index]));
-    }
-    if (Array.isArray(object1) !== Array.isArray(object2)) {
-        return false;
-    }
-    if (!isObject(object1) || !isObject(object2)) {
-        return object1 === object2;
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    return keys1.every((key) => deepEqual(object1[key], object2[key]));
-};
-
 const isScrollable = (node) => {
     if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
         return false;
@@ -240,336 +225,390 @@ const getScrollParent = (node) => {
     return document.scrollingElement || document.documentElement;
 };
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+// useLayoutEffect in the browser. We need useLayoutEffect to ensure the store
+// subscription callback always has the selector from the latest render commit
+// available, otherwise a store update may happen between render and the effect,
+// which may cause missed updates; we also must ensure the store subscription
+// is created synchronously, otherwise a store update may occur before the
+// subscription is created and an inconsistent state may be observed
+const isHopefullyDomEnvironment = typeof window !== 'undefined' &&
+    typeof window.document !== 'undefined' &&
+    typeof window.document.createElement !== 'undefined';
+const useIsomorphicLayoutEffect = isHopefullyDomEnvironment ? useLayoutEffect : useEffect;
 
 const clearTimeoutRef = (ref) => {
     if (ref.current) {
         clearTimeout(ref.current);
-        // eslint-disable-next-line no-param-reassign
         ref.current = null;
     }
 };
 
-var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE","closing":"core-styles-module_closing__sGnxF"};
+function parseDataTooltipIdSelector(selector) {
+    const match = selector.match(/^\[data-tooltip-id=(['"])((?:\\.|(?!\1).)*)\1\]$/);
+    if (!match) {
+        return null;
+    }
+    return match[2].replace(/\\(['"])/g, '$1');
+}
 
-var styles = {"tooltip":"styles-module_tooltip__mnnfp","arrow":"styles-module_arrow__K0L3T","dark":"styles-module_dark__xNqje","light":"styles-module_light__Z6W-X","success":"styles-module_success__A2AKt","warning":"styles-module_warning__SCK0X","error":"styles-module_error__JvumD","info":"styles-module_info__BWdHW"};
+function resolveDataTooltipAnchor(targetElement, tooltipId) {
+    let currentElement = targetElement;
+    while (currentElement) {
+        if (currentElement.dataset.tooltipId === tooltipId) {
+            return currentElement;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+}
 
-const Tooltip = ({ 
-// props
-forwardRef, id, className, classNameArrow, variant = 'dark', anchorSelect, place = 'top', offset = 10, openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly, style: externalStyles, position, afterShow, afterHide, 
-// props handled by controller
-content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, role = 'tooltip', }) => {
-    var _a;
-    const tooltipRef = useRef(null);
-    const tooltipArrowRef = useRef(null);
-    const tooltipShowDelayTimerRef = useRef(null);
-    const tooltipHideDelayTimerRef = useRef(null);
-    const missedTransitionTimerRef = useRef(null);
-    const [computedPosition, setComputedPosition] = useState({
-        tooltipStyles: {},
-        tooltipArrowStyles: {},
-        place,
-    });
-    const [show, setShow] = useState(false);
-    const [rendered, setRendered] = useState(false);
-    const [imperativeOptions, setImperativeOptions] = useState(null);
-    const wasShowing = useRef(false);
-    const lastFloatPosition = useRef(null);
-    const hoveringTooltip = useRef(false);
-    const [anchorElements, setAnchorElements] = useState([]);
-    const mounted = useRef(false);
-    /**
-     * useLayoutEffect runs before useEffect,
-     * but should be used carefully because of caveats
-     * https://beta.reactjs.org/reference/react/useLayoutEffect#caveats
-     */
-    useIsomorphicLayoutEffect(() => {
-        mounted.current = true;
-        return () => {
-            mounted.current = false;
+var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","content":"core-styles-module_content__BRKdB","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE","closing":"core-styles-module_closing__sGnxF"};
+
+var styles = {"tooltip":"styles-module_tooltip__mnnfp","content":"styles-module_content__ydYdI","arrow":"styles-module_arrow__K0L3T","dark":"styles-module_dark__xNqje","light":"styles-module_light__Z6W-X","success":"styles-module_success__A2AKt","warning":"styles-module_warning__SCK0X","error":"styles-module_error__JvumD","info":"styles-module_info__BWdHW"};
+
+const registry = new Map();
+let documentObserver = null;
+/**
+ * Extract a tooltip ID from a simple `[data-tooltip-id='value']` selector.
+ * Returns null for complex or custom selectors.
+ */
+function extractTooltipId(selector) {
+    const match = selector.match(/^\[data-tooltip-id=(['"])((?:\\.|(?!\1).)*)\1\]$/);
+    return match ? match[2].replace(/\\(['"])/g, '$1') : null;
+}
+function areAnchorListsEqual(left, right) {
+    if (left.length !== right.length) {
+        return false;
+    }
+    return left.every((anchor, index) => anchor === right[index]);
+}
+function readAnchorsForSelector(selector) {
+    try {
+        return {
+            anchors: Array.from(document.querySelectorAll(selector)),
+            error: null,
         };
-    }, []);
-    const handleShow = useCallback((value) => {
-        if (!mounted.current) {
-            return;
+    }
+    catch (error) {
+        return {
+            anchors: [],
+            error: error instanceof Error ? error : new Error(String(error)),
+        };
+    }
+}
+function notifySubscribers(entry) {
+    entry.subscribers.forEach((subscriber) => subscriber(entry.anchors, entry.error));
+}
+function refreshEntry(selector, entry) {
+    var _a, _b, _c, _d;
+    const nextState = readAnchorsForSelector(selector);
+    const nextErrorMessage = (_b = (_a = nextState.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : null;
+    const previousErrorMessage = (_d = (_c = entry.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : null;
+    if (areAnchorListsEqual(entry.anchors, nextState.anchors) &&
+        nextErrorMessage === previousErrorMessage) {
+        return;
+    }
+    const nextEntry = {
+        ...entry,
+        anchors: nextState.anchors,
+        error: nextState.error,
+    };
+    registry.set(selector, nextEntry);
+    notifySubscribers(nextEntry);
+}
+function refreshAllEntries() {
+    registry.forEach((entry, selector) => {
+        refreshEntry(selector, entry);
+    });
+}
+let refreshScheduled = false;
+let pendingTooltipIds = null;
+let pendingFullRefresh = false;
+function scheduleRefresh(affectedTooltipIds) {
+    if (affectedTooltipIds) {
+        if (!pendingTooltipIds) {
+            pendingTooltipIds = new Set();
         }
-        if (value) {
-            setRendered(true);
+        affectedTooltipIds.forEach((id) => pendingTooltipIds.add(id));
+    }
+    else {
+        pendingFullRefresh = true;
+    }
+    if (refreshScheduled) {
+        return;
+    }
+    refreshScheduled = true;
+    const flush = () => {
+        refreshScheduled = false;
+        const fullRefresh = pendingFullRefresh;
+        const ids = pendingTooltipIds;
+        pendingFullRefresh = false;
+        pendingTooltipIds = null;
+        if (fullRefresh) {
+            refreshAllEntries();
         }
-        /**
-         * wait for the component to render and calculate position
-         * before actually showing
-         */
-        setTimeout(() => {
-            if (!mounted.current) {
-                return;
-            }
-            setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(value);
-            if (isOpen === undefined) {
-                setShow(value);
-            }
-        }, 10);
-    }, [isOpen, setIsOpen]);
-    /**
-     * this replicates the effect from `handleShow()`
-     * when `isOpen` is changed from outside
-     */
-    useEffect(() => {
-        if (isOpen === undefined) {
-            return () => null;
+        else if (ids && ids.size > 0) {
+            refreshEntriesForTooltipIds(ids);
         }
-        if (isOpen) {
-            setRendered(true);
+    };
+    if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(flush);
+    }
+    else {
+        Promise.resolve().then(flush);
+    }
+}
+/**
+ * Only refresh entries whose tooltipId is in the affected set,
+ * plus any entries with custom (non-tooltipId) selectors.
+ */
+function refreshEntriesForTooltipIds(affectedIds) {
+    registry.forEach((entry, selector) => {
+        if (entry.tooltipId === null || affectedIds.has(entry.tooltipId)) {
+            refreshEntry(selector, entry);
         }
-        const timeout = setTimeout(() => {
-            setShow(isOpen);
-        }, 10);
-        return () => {
-            clearTimeout(timeout);
+    });
+}
+/**
+ * Collect tooltip IDs from mutation records. Returns null when targeted
+ * analysis is not worthwhile (few registry entries, or too many nodes to scan).
+ */
+function collectAffectedTooltipIds(records) {
+    var _a;
+    // Targeted refresh only pays off when there are many distinct selectors.
+    // With few entries, full refresh is already cheap — skip the analysis overhead.
+    if (registry.size <= 4) {
+        return null;
+    }
+    const ids = new Set();
+    for (const record of records) {
+        if (record.type === 'attributes') {
+            const target = record.target;
+            const currentId = (_a = target.getAttribute) === null || _a === void 0 ? void 0 : _a.call(target, 'data-tooltip-id');
+            if (currentId)
+                ids.add(currentId);
+            if (record.oldValue)
+                ids.add(record.oldValue);
+            continue;
+        }
+        if (record.type === 'childList') {
+            const gatherIds = (nodes) => {
+                var _a, _b;
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    if (node.nodeType !== Node.ELEMENT_NODE)
+                        continue;
+                    const el = node;
+                    const id = (_a = el.getAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-tooltip-id');
+                    if (id)
+                        ids.add(id);
+                    // For large subtrees, bail out to full refresh to avoid double-scanning
+                    const descendants = (_b = el.querySelectorAll) === null || _b === void 0 ? void 0 : _b.call(el, '[data-tooltip-id]');
+                    if (descendants) {
+                        if (descendants.length > 50) {
+                            return true; // signal bail-out
+                        }
+                        for (let j = 0; j < descendants.length; j++) {
+                            const descId = descendants[j].getAttribute('data-tooltip-id');
+                            if (descId)
+                                ids.add(descId);
+                        }
+                    }
+                }
+                return false;
+            };
+            if (gatherIds(record.addedNodes) || gatherIds(record.removedNodes)) {
+                return null; // large mutation — full refresh is cheaper
+            }
+            continue;
+        }
+    }
+    return ids;
+}
+function ensureDocumentObserver() {
+    if (documentObserver || typeof MutationObserver === 'undefined') {
+        return;
+    }
+    documentObserver = new MutationObserver((records) => {
+        const affectedIds = collectAffectedTooltipIds(records);
+        scheduleRefresh(affectedIds);
+    });
+    documentObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['data-tooltip-id'],
+        attributeOldValue: true,
+    });
+}
+function cleanupDocumentObserverIfUnused() {
+    if (registry.size !== 0 || !documentObserver) {
+        return;
+    }
+    documentObserver.disconnect();
+    documentObserver = null;
+}
+function subscribeAnchorSelector(selector, subscriber) {
+    let entry = registry.get(selector);
+    if (!entry) {
+        const initialState = readAnchorsForSelector(selector);
+        entry = {
+            anchors: initialState.anchors,
+            error: initialState.error,
+            subscribers: new Set(),
+            tooltipId: extractTooltipId(selector),
         };
-    }, [isOpen]);
-    useEffect(() => {
-        if (show === wasShowing.current) {
+        registry.set(selector, entry);
+    }
+    entry.subscribers.add(subscriber);
+    ensureDocumentObserver();
+    subscriber([...entry.anchors], entry.error);
+    return () => {
+        const currentEntry = registry.get(selector);
+        if (!currentEntry) {
             return;
         }
-        clearTimeoutRef(missedTransitionTimerRef);
-        wasShowing.current = show;
-        if (show) {
-            afterShow === null || afterShow === void 0 ? void 0 : afterShow();
-        }
-        else {
-            /**
-             * see `onTransitionEnd` on tooltip wrapper
-             */
-            const style = getComputedStyle(document.body);
-            const transitionShowDelay = cssTimeToMs(style.getPropertyValue('--rt-transition-show-delay'));
-            missedTransitionTimerRef.current = setTimeout(() => {
-                /**
-                 * if the tooltip switches from `show === true` to `show === false` too fast
-                 * the transition never runs, so `onTransitionEnd` callback never gets fired
-                 */
-                setRendered(false);
-                setImperativeOptions(null);
-                afterHide === null || afterHide === void 0 ? void 0 : afterHide();
-                // +25ms just to make sure `onTransitionEnd` (if it gets fired) has time to run
-            }, transitionShowDelay + 25);
+        currentEntry.subscribers.delete(subscriber);
+        if (currentEntry.subscribers.size === 0) {
+            registry.delete(selector);
         }
-    }, [afterHide, afterShow, show]);
-    const handleComputedPosition = (newComputedPosition) => {
-        setComputedPosition((oldComputedPosition) => deepEqual(oldComputedPosition, newComputedPosition)
-            ? oldComputedPosition
-            : newComputedPosition);
+        cleanupDocumentObserverIfUnused();
     };
-    const handleShowTooltipDelayed = useCallback((delay = delayShow) => {
-        if (tooltipShowDelayTimerRef.current) {
-            clearTimeout(tooltipShowDelayTimerRef.current);
+}
+
+const getAnchorSelector = ({ id, anchorSelect, imperativeAnchorSelect, }) => {
+    var _a;
+    let selector = (_a = imperativeAnchorSelect !== null && imperativeAnchorSelect !== void 0 ? imperativeAnchorSelect : anchorSelect) !== null && _a !== void 0 ? _a : '';
+    if (!selector && id) {
+        selector = `[data-tooltip-id='${id.replace(/'/g, "\\'")}']`;
+    }
+    return selector;
+};
+const useTooltipAnchors = ({ id, anchorSelect, imperativeAnchorSelect, activeAnchor, disableTooltip, onActiveAnchorRemoved, trackAnchors, }) => {
+    const [rawAnchorElements, setRawAnchorElements] = useState([]);
+    const [selectorError, setSelectorError] = useState(null);
+    const warnedSelectorRef = useRef(null);
+    const selector = useMemo(() => getAnchorSelector({ id, anchorSelect, imperativeAnchorSelect }), [id, anchorSelect, imperativeAnchorSelect]);
+    const anchorElements = useMemo(() => rawAnchorElements.filter((anchor) => !(disableTooltip === null || disableTooltip === void 0 ? void 0 : disableTooltip(anchor))), [rawAnchorElements, disableTooltip]);
+    const activeAnchorMatchesSelector = useMemo(() => {
+        if (!activeAnchor || !selector) {
+            return false;
         }
-        if (rendered) {
-            // if the tooltip is already rendered, ignore delay
-            handleShow(true);
-            return;
+        try {
+            return activeAnchor.matches(selector);
         }
-        tooltipShowDelayTimerRef.current = setTimeout(() => {
-            handleShow(true);
-        }, delay);
-    }, [delayShow, handleShow, rendered]);
-    const handleHideTooltipDelayed = useCallback((delay = delayHide) => {
-        if (tooltipHideDelayTimerRef.current) {
-            clearTimeout(tooltipHideDelayTimerRef.current);
+        catch (_a) {
+            return false;
         }
-        tooltipHideDelayTimerRef.current = setTimeout(() => {
-            if (hoveringTooltip.current) {
-                return;
-            }
-            handleShow(false);
-        }, delay);
-    }, [delayHide, handleShow]);
-    const handleTooltipPosition = useCallback(({ x, y }) => {
-        var _a;
-        const virtualElement = {
-            getBoundingClientRect() {
-                return {
-                    x,
-                    y,
-                    width: 0,
-                    height: 0,
-                    top: y,
-                    left: x,
-                    right: x,
-                    bottom: y,
-                };
-            },
-        };
-        computeTooltipPosition({
-            place: (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place) !== null && _a !== void 0 ? _a : place,
-            offset,
-            elementReference: virtualElement,
-            tooltipReference: tooltipRef.current,
-            tooltipArrowReference: tooltipArrowRef.current,
-            strategy: positionStrategy,
-            middlewares,
-            border,
-        }).then((computedStylesData) => {
-            handleComputedPosition(computedStylesData);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeAnchor, selector, anchorElements]);
+    useEffect(() => {
+        if (!selector || !trackAnchors) {
+            setRawAnchorElements([]);
+            setSelectorError(null);
+            return undefined;
+        }
+        return subscribeAnchorSelector(selector, (anchors, error) => {
+            setRawAnchorElements(anchors);
+            setSelectorError(error);
         });
-    }, [imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place, place, offset, positionStrategy, middlewares, border]);
-    const updateTooltipPosition = useCallback(() => {
-        var _a, _b;
-        const actualPosition = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position) !== null && _a !== void 0 ? _a : position;
-        if (actualPosition) {
-            // if `position` is set, override regular and `float` positioning
-            handleTooltipPosition(actualPosition);
+    }, [selector, trackAnchors]);
+    useEffect(() => {
+        if (!selectorError || warnedSelectorRef.current === selector) {
             return;
         }
-        if (float) {
-            if (lastFloatPosition.current) {
-                /*
-                  Without this, changes to `content`, `place`, `offset`, ..., will only
-                  trigger a position calculation after a `mousemove` event.
-        
-                  To see why this matters, comment this line, run `yarn dev` and click the
-                  "Hover me!" anchor.
-                */
-                handleTooltipPosition(lastFloatPosition.current);
-            }
-            // if `float` is set, override regular positioning
+        warnedSelectorRef.current = selector;
+        /* c8 ignore end */
+    }, [selector, selectorError]);
+    useEffect(() => {
+        if (!activeAnchor) {
             return;
         }
-        if (!(activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.isConnected)) {
+        if (!activeAnchor.isConnected) {
+            onActiveAnchorRemoved();
             return;
         }
-        computeTooltipPosition({
-            place: (_b = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place) !== null && _b !== void 0 ? _b : place,
-            offset,
-            elementReference: activeAnchor,
-            tooltipReference: tooltipRef.current,
-            tooltipArrowReference: tooltipArrowRef.current,
-            strategy: positionStrategy,
-            middlewares,
-            border,
-        }).then((computedStylesData) => {
-            if (!mounted.current) {
-                // invalidate computed positions after remount
-                return;
-            }
-            handleComputedPosition(computedStylesData);
-        });
-    }, [
-        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
-        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place,
-        position,
-        float,
-        activeAnchor,
-        place,
-        offset,
-        positionStrategy,
-        middlewares,
-        border,
-        handleTooltipPosition,
-    ]);
-    useEffect(() => {
-        /**
-         * TODO(V6): break this effect down into callbacks for clarity
-         *   - `handleKeyboardEvents()`
-         *   - `handleMouseEvents()`
-         *   - `handleGlobalCloseEvents()`
-         *   - `handleAnchorEvents()`
-         *   - ...
-         */
-        const handlePointerMove = (event) => {
-            if (!event) {
-                return;
-            }
-            const mouseEvent = event;
-            const mousePosition = {
-                x: mouseEvent.clientX,
-                y: mouseEvent.clientY,
-            };
-            handleTooltipPosition(mousePosition);
-            lastFloatPosition.current = mousePosition;
-        };
-        const handleClickOutsideAnchors = (event) => {
-            var _a;
-            if (!show) {
-                return;
-            }
-            const target = event.target;
-            if (!target.isConnected) {
-                return;
-            }
-            if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
-                return;
-            }
-            if (anchorElements.some((anchor) => anchor === null || anchor === void 0 ? void 0 : anchor.contains(target))) {
-                return;
-            }
-            handleShow(false);
-            if (tooltipShowDelayTimerRef.current) {
-                clearTimeout(tooltipShowDelayTimerRef.current);
-            }
-        };
-        const handleShowTooltip = (event) => {
-            var _a;
-            if (!event) {
-                return;
-            }
-            const target = ((_a = event.currentTarget) !== null && _a !== void 0 ? _a : event.target);
-            if (!(target === null || target === void 0 ? void 0 : target.isConnected)) {
-                /**
-                 * this happens when the target is removed from the DOM
-                 * at the same time the tooltip gets triggered
-                 */
-                setActiveAnchor(null);
-                return;
-            }
-            if (delayShow) {
-                handleShowTooltipDelayed();
-            }
-            else {
-                handleShow(true);
-            }
-            setActiveAnchor(target);
-            if (tooltipHideDelayTimerRef.current) {
-                clearTimeout(tooltipHideDelayTimerRef.current);
-            }
-        };
-        const handleHideTooltip = () => {
-            if (clickable) {
-                // allow time for the mouse to reach the tooltip, in case there's a gap
-                handleHideTooltipDelayed(delayHide || 100);
-            }
-            else if (delayHide) {
-                handleHideTooltipDelayed();
-            }
-            else {
-                handleShow(false);
-            }
-            if (tooltipShowDelayTimerRef.current) {
-                clearTimeout(tooltipShowDelayTimerRef.current);
-            }
-        };
-        // debounce handler to prevent call twice when
-        // mouse enter and focus events being triggered toggether
-        const internalDebouncedHandleShowTooltip = debounce(handleShowTooltip, 50);
-        const internalDebouncedHandleHideTooltip = debounce(handleHideTooltip, 50);
-        // If either of the functions is called while the other is still debounced,
-        // reset the timeout. Otherwise if there is a sub-50ms (leave A, enter B, leave B)
-        // sequence of events, the tooltip will stay open because the hide debounce
-        // from leave A prevented the leave B event from calling it, leaving the
-        // tooltip visible.
-        const debouncedHandleShowTooltip = (e) => {
-            internalDebouncedHandleHideTooltip.cancel();
-            internalDebouncedHandleShowTooltip(e);
-        };
-        const debouncedHandleHideTooltip = () => {
-            internalDebouncedHandleShowTooltip.cancel();
-            internalDebouncedHandleHideTooltip();
-        };
-        const handleScrollResize = () => {
-            handleShow(false);
-        };
-        const hasClickEvent = openOnClick || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.click) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.dblclick) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.mousedown);
-        const actualOpenEvents = openEvents
+        if (!anchorElements.includes(activeAnchor) && !activeAnchorMatchesSelector) {
+            onActiveAnchorRemoved();
+        }
+    }, [activeAnchor, anchorElements, activeAnchorMatchesSelector, onActiveAnchorRemoved]);
+    return {
+        anchorElements,
+        selector,
+    };
+};
+
+/**
+ * Shared document event delegation.
+ *
+ * Instead of N tooltips each calling document.addEventListener(type, handler),
+ * we maintain ONE document listener per event type. When the event fires,
+ * we iterate through all registered handlers for that type.
+ *
+ * This reduces document-level listeners from O(N × eventTypes) to O(eventTypes).
+ */
+const handlersByType = new Map();
+function getOrCreateSet(eventType) {
+    let set = handlersByType.get(eventType);
+    if (!set) {
+        set = new Set();
+        handlersByType.set(eventType, set);
+        document.addEventListener(eventType, dispatch);
+    }
+    return set;
+}
+function dispatch(event) {
+    const handlers = handlersByType.get(event.type);
+    if (handlers) {
+        // Safe to iterate directly — mutations (add/remove) only happen in
+        // setup/cleanup, not during dispatch. Set iteration is stable for
+        // entries that existed when iteration began.
+        handlers.forEach((handler) => {
+            handler(event);
+        });
+    }
+}
+/**
+ * Register a handler for a document-level event type.
+ * Returns an unsubscribe function.
+ */
+function addDelegatedEventListener(eventType, handler) {
+    const set = getOrCreateSet(eventType);
+    set.add(handler);
+    return () => {
+        set.delete(handler);
+        if (set.size === 0) {
+            handlersByType.delete(eventType);
+            document.removeEventListener(eventType, dispatch);
+        }
+    };
+}
+
+const useTooltipEvents = ({ activeAnchor, anchorElements, anchorSelector, clickable, closeEvents, delayHide, delayShow, disableTooltip, float, globalCloseEvents, handleHideTooltipDelayed, handleShow, handleShowTooltipDelayed, handleTooltipPosition, hoveringTooltip, imperativeModeOnly, lastFloatPosition, openEvents, openOnClick, setActiveAnchor, show, tooltipHideDelayTimerRef, tooltipRef, tooltipShowDelayTimerRef, updateTooltipPosition, }) => {
+    // Ref-stable debounced handlers — avoids recreating debounce instances on every effect run
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const debouncedShowRef = useRef(debounce((_anchor) => { }, 50));
+    const debouncedHideRef = useRef(debounce(() => { }, 50));
+    // Cache scroll parents — only recompute when the element actually changes
+    const anchorScrollParentRef = useRef(null);
+    const tooltipScrollParentRef = useRef(null);
+    const prevAnchorRef = useRef(null);
+    const prevTooltipRef = useRef(null);
+    if (activeAnchor !== prevAnchorRef.current) {
+        prevAnchorRef.current = activeAnchor;
+        anchorScrollParentRef.current = getScrollParent(activeAnchor);
+    }
+    const currentTooltipEl = tooltipRef.current;
+    if (currentTooltipEl !== prevTooltipRef.current) {
+        prevTooltipRef.current = currentTooltipEl;
+        tooltipScrollParentRef.current = getScrollParent(currentTooltipEl);
+    }
+    // Memoize event config objects — only rebuild when the relevant props change
+    const hasClickEvent = openOnClick || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.click) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.dblclick) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.mousedown);
+    const actualOpenEvents = useMemo(() => {
+        const events = openEvents
             ? { ...openEvents }
             : {
                 mouseenter: true,
@@ -579,13 +618,25 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 mousedown: false,
             };
         if (!openEvents && openOnClick) {
-            Object.assign(actualOpenEvents, {
+            Object.assign(events, {
                 mouseenter: false,
                 focus: false,
                 click: true,
             });
         }
-        const actualCloseEvents = closeEvents
+        if (imperativeModeOnly) {
+            Object.assign(events, {
+                mouseenter: false,
+                focus: false,
+                click: false,
+                dblclick: false,
+                mousedown: false,
+            });
+        }
+        return events;
+    }, [openEvents, openOnClick, imperativeModeOnly]);
+    const actualCloseEvents = useMemo(() => {
+        const events = closeEvents
             ? { ...closeEvents }
             : {
                 mouseleave: true,
@@ -595,12 +646,24 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 mouseup: false,
             };
         if (!closeEvents && openOnClick) {
-            Object.assign(actualCloseEvents, {
+            Object.assign(events, {
+                mouseleave: false,
+                blur: false,
+            });
+        }
+        if (imperativeModeOnly) {
+            Object.assign(events, {
                 mouseleave: false,
                 blur: false,
+                click: false,
+                dblclick: false,
+                mouseup: false,
             });
         }
-        const actualGlobalCloseEvents = globalCloseEvents
+        return events;
+    }, [closeEvents, openOnClick, imperativeModeOnly]);
+    const actualGlobalCloseEvents = useMemo(() => {
+        const events = globalCloseEvents
             ? { ...globalCloseEvents }
             : {
                 escape: false,
@@ -609,30 +672,276 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 clickOutsideAnchor: hasClickEvent || false,
             };
         if (imperativeModeOnly) {
-            Object.assign(actualOpenEvents, {
-                mouseenter: false,
-                focus: false,
-                click: false,
-                dblclick: false,
-                mousedown: false,
-            });
-            Object.assign(actualCloseEvents, {
-                mouseleave: false,
-                blur: false,
-                click: false,
-                dblclick: false,
-                mouseup: false,
-            });
-            Object.assign(actualGlobalCloseEvents, {
+            Object.assign(events, {
                 escape: false,
                 scroll: false,
                 resize: false,
                 clickOutsideAnchor: false,
             });
         }
+        return events;
+    }, [globalCloseEvents, hasClickEvent, imperativeModeOnly]);
+    // --- Refs for values read inside event handlers (avoids effect deps) ---
+    const activeAnchorRef = useRef(activeAnchor);
+    activeAnchorRef.current = activeAnchor;
+    const showRef = useRef(show);
+    showRef.current = show;
+    const anchorElementsRef = useRef(anchorElements);
+    anchorElementsRef.current = anchorElements;
+    const handleShowRef = useRef(handleShow);
+    handleShowRef.current = handleShow;
+    const handleTooltipPositionRef = useRef(handleTooltipPosition);
+    handleTooltipPositionRef.current = handleTooltipPosition;
+    const updateTooltipPositionRef = useRef(updateTooltipPosition);
+    updateTooltipPositionRef.current = updateTooltipPosition;
+    // --- Handler refs (updated every render, read via ref indirection in effects) ---
+    const resolveAnchorElementRef = useRef(() => null);
+    const handleShowTooltipRef = useRef(() => { });
+    const handleHideTooltipRef = useRef(() => { });
+    const dataTooltipId = anchorSelector ? parseDataTooltipIdSelector(anchorSelector) : null;
+    resolveAnchorElementRef.current = (target) => {
+        var _a, _b;
+        const targetElement = target;
+        if (!(targetElement === null || targetElement === void 0 ? void 0 : targetElement.isConnected)) {
+            return null;
+        }
+        if (dataTooltipId) {
+            const matchedAnchor = resolveDataTooltipAnchor(targetElement, dataTooltipId);
+            if (matchedAnchor && !(disableTooltip === null || disableTooltip === void 0 ? void 0 : disableTooltip(matchedAnchor))) {
+                return matchedAnchor;
+            }
+        }
+        else if (anchorSelector) {
+            try {
+                const matchedAnchor = (_a = (targetElement.matches(anchorSelector)
+                    ? targetElement
+                    : targetElement.closest(anchorSelector))) !== null && _a !== void 0 ? _a : null;
+                if (matchedAnchor && !(disableTooltip === null || disableTooltip === void 0 ? void 0 : disableTooltip(matchedAnchor))) {
+                    return matchedAnchor;
+                }
+            }
+            catch (_c) {
+                return null;
+            }
+        }
+        return ((_b = anchorElementsRef.current.find((anchor) => anchor === targetElement || anchor.contains(targetElement))) !== null && _b !== void 0 ? _b : null);
+    };
+    handleShowTooltipRef.current = (anchor) => {
+        if (!anchor) {
+            return;
+        }
+        if (!anchor.isConnected) {
+            setActiveAnchor(null);
+            return;
+        }
+        if (disableTooltip === null || disableTooltip === void 0 ? void 0 : disableTooltip(anchor)) {
+            return;
+        }
+        if (delayShow) {
+            handleShowTooltipDelayed();
+        }
+        else {
+            handleShow(true);
+        }
+        if (delayShow && activeAnchorRef.current && anchor !== activeAnchorRef.current) {
+            // Moving to a different anchor while one is already active — defer the anchor
+            // switch until the show delay fires to prevent content/position from updating
+            // before visibility transitions complete.
+            if (tooltipShowDelayTimerRef.current) {
+                clearTimeout(tooltipShowDelayTimerRef.current);
+            }
+            tooltipShowDelayTimerRef.current = setTimeout(() => {
+                setActiveAnchor(anchor);
+                handleShow(true);
+            }, delayShow);
+        }
+        else {
+            setActiveAnchor(anchor);
+        }
+        if (tooltipHideDelayTimerRef.current) {
+            clearTimeout(tooltipHideDelayTimerRef.current);
+        }
+    };
+    handleHideTooltipRef.current = () => {
+        if (clickable) {
+            handleHideTooltipDelayed(delayHide || 100);
+        }
+        else if (delayHide) {
+            handleHideTooltipDelayed();
+        }
+        else {
+            handleShow(false);
+        }
+        if (tooltipShowDelayTimerRef.current) {
+            clearTimeout(tooltipShowDelayTimerRef.current);
+        }
+    };
+    // Update debounced callbacks to always delegate to latest handler refs
+    const debouncedShow = debouncedShowRef.current;
+    const debouncedHide = debouncedHideRef.current;
+    debouncedShow.setCallback((anchor) => handleShowTooltipRef.current(anchor));
+    debouncedHide.setCallback(() => handleHideTooltipRef.current());
+    // --- Effect 1: Delegated anchor events + tooltip hover ---
+    // Only re-runs when the set of active event types or interaction mode changes.
+    // Handlers read reactive values (activeAnchor, show, etc.) from refs at invocation
+    // time, so this effect is decoupled from show/hide state changes.
+    useEffect(() => {
+        const cleanupFns = [];
+        const addDelegatedListener = (eventType, listener) => {
+            cleanupFns.push(addDelegatedEventListener(eventType, listener));
+        };
+        const activeAnchorContainsTarget = (event) => { var _a; return Boolean((event === null || event === void 0 ? void 0 : event.target) && ((_a = activeAnchorRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))); };
+        const debouncedHandleShowTooltip = (anchor) => {
+            debouncedHide.cancel();
+            debouncedShow(anchor);
+        };
+        const debouncedHandleHideTooltip = () => {
+            debouncedShow.cancel();
+            debouncedHide();
+        };
+        const addDelegatedHoverOpenListener = () => {
+            addDelegatedListener('mouseover', (event) => {
+                const anchor = resolveAnchorElementRef.current(event.target);
+                if (!anchor) {
+                    return;
+                }
+                const relatedAnchor = resolveAnchorElementRef.current(event.relatedTarget);
+                if (relatedAnchor === anchor) {
+                    return;
+                }
+                debouncedHandleShowTooltip(anchor);
+            });
+        };
+        const addDelegatedHoverCloseListener = () => {
+            addDelegatedListener('mouseout', (event) => {
+                var _a;
+                if (!activeAnchorContainsTarget(event)) {
+                    return;
+                }
+                const relatedTarget = event.relatedTarget;
+                if ((_a = activeAnchorRef.current) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) {
+                    return;
+                }
+                debouncedHandleHideTooltip();
+            });
+        };
+        if (actualOpenEvents.mouseenter) {
+            addDelegatedHoverOpenListener();
+        }
+        if (actualCloseEvents.mouseleave) {
+            addDelegatedHoverCloseListener();
+        }
+        if (actualOpenEvents.mouseover) {
+            addDelegatedHoverOpenListener();
+        }
+        if (actualCloseEvents.mouseout) {
+            addDelegatedHoverCloseListener();
+        }
+        if (actualOpenEvents.focus) {
+            addDelegatedListener('focusin', (event) => {
+                debouncedHandleShowTooltip(resolveAnchorElementRef.current(event.target));
+            });
+        }
+        if (actualCloseEvents.blur) {
+            addDelegatedListener('focusout', (event) => {
+                var _a;
+                if (!activeAnchorContainsTarget(event)) {
+                    return;
+                }
+                const relatedTarget = event.relatedTarget;
+                if ((_a = activeAnchorRef.current) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) {
+                    return;
+                }
+                debouncedHandleHideTooltip();
+            });
+        }
+        const regularEvents = ['mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'focus', 'blur'];
+        const clickEvents = ['click', 'dblclick', 'mousedown', 'mouseup'];
+        const handleClickOpenTooltipAnchor = (event) => {
+            var _a;
+            const anchor = resolveAnchorElementRef.current((_a = event === null || event === void 0 ? void 0 : event.target) !== null && _a !== void 0 ? _a : null);
+            if (!anchor) {
+                return;
+            }
+            if (showRef.current && activeAnchorRef.current === anchor) {
+                return;
+            }
+            handleShowTooltipRef.current(anchor);
+        };
+        const handleClickCloseTooltipAnchor = (event) => {
+            if (!showRef.current || !activeAnchorContainsTarget(event)) {
+                return;
+            }
+            handleHideTooltipRef.current();
+        };
+        Object.entries(actualOpenEvents).forEach(([event, enabled]) => {
+            if (!enabled || regularEvents.includes(event)) {
+                return;
+            }
+            if (clickEvents.includes(event)) {
+                addDelegatedListener(event, handleClickOpenTooltipAnchor);
+            }
+        });
+        Object.entries(actualCloseEvents).forEach(([event, enabled]) => {
+            if (!enabled || regularEvents.includes(event)) {
+                return;
+            }
+            if (clickEvents.includes(event)) {
+                addDelegatedListener(event, handleClickCloseTooltipAnchor);
+            }
+        });
+        if (float) {
+            addDelegatedListener('pointermove', (event) => {
+                const currentActiveAnchor = activeAnchorRef.current;
+                if (!currentActiveAnchor) {
+                    return;
+                }
+                const targetAnchor = resolveAnchorElementRef.current(event.target);
+                if (targetAnchor !== currentActiveAnchor) {
+                    return;
+                }
+                const mouseEvent = event;
+                const mousePosition = {
+                    x: mouseEvent.clientX,
+                    y: mouseEvent.clientY,
+                };
+                handleTooltipPositionRef.current(mousePosition);
+                lastFloatPosition.current = mousePosition;
+            });
+        }
         const tooltipElement = tooltipRef.current;
-        const tooltipScrollParent = getScrollParent(tooltipRef.current);
-        const anchorScrollParent = getScrollParent(activeAnchor);
+        const handleMouseOverTooltip = () => {
+            hoveringTooltip.current = true;
+        };
+        const handleMouseOutTooltip = () => {
+            hoveringTooltip.current = false;
+            handleHideTooltipRef.current();
+        };
+        const addHoveringTooltipListeners = clickable && (actualCloseEvents.mouseout || actualCloseEvents.mouseleave);
+        if (addHoveringTooltipListeners) {
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseover', handleMouseOverTooltip);
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseout', handleMouseOutTooltip);
+        }
+        return () => {
+            cleanupFns.forEach((fn) => fn());
+            if (addHoveringTooltipListeners) {
+                tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseover', handleMouseOverTooltip);
+                tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseout', handleMouseOutTooltip);
+            }
+            debouncedShow.cancel();
+            debouncedHide.cancel();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [actualOpenEvents, actualCloseEvents, float, clickable]);
+    // --- Effect 2: Global close events + auto-update ---
+    // Re-runs when the global close config changes, or when the active anchor changes
+    // (for scroll parent listeners and floating-ui autoUpdate).
+    useEffect(() => {
+        const handleScrollResize = () => {
+            handleShowRef.current(false);
+        };
+        const tooltipScrollParent = tooltipScrollParentRef.current;
+        const anchorScrollParent = anchorScrollParentRef.current;
         if (actualGlobalCloseEvents.scroll) {
             window.addEventListener('scroll', handleScrollResize);
             anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.addEventListener('scroll', handleScrollResize);
@@ -643,7 +952,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             window.addEventListener('resize', handleScrollResize);
         }
         else if (activeAnchor && tooltipRef.current) {
-            updateTooltipCleanup = autoUpdate(activeAnchor, tooltipRef.current, updateTooltipPosition, {
+            updateTooltipCleanup = autoUpdate(activeAnchor, tooltipRef.current, () => updateTooltipPositionRef.current(), {
                 ancestorResize: true,
                 elementResize: true,
                 layoutShift: true,
@@ -653,295 +962,484 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             if (event.key !== 'Escape') {
                 return;
             }
-            handleShow(false);
-        };
-        if (actualGlobalCloseEvents.escape) {
-            window.addEventListener('keydown', handleEsc);
+            handleShowRef.current(false);
+        };
+        if (actualGlobalCloseEvents.escape) {
+            window.addEventListener('keydown', handleEsc);
+        }
+        const handleClickOutsideAnchors = (event) => {
+            var _a, _b;
+            if (!showRef.current) {
+                return;
+            }
+            const target = event.target;
+            if (!(target === null || target === void 0 ? void 0 : target.isConnected)) {
+                return;
+            }
+            if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
+                return;
+            }
+            if ((_b = activeAnchorRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)) {
+                return;
+            }
+            if (anchorElementsRef.current.some((anchor) => anchor === null || anchor === void 0 ? void 0 : anchor.contains(target))) {
+                return;
+            }
+            handleShowRef.current(false);
+            clearTimeoutRef(tooltipShowDelayTimerRef);
+        };
+        if (actualGlobalCloseEvents.clickOutsideAnchor) {
+            window.addEventListener('click', handleClickOutsideAnchors);
+        }
+        return () => {
+            if (actualGlobalCloseEvents.scroll) {
+                window.removeEventListener('scroll', handleScrollResize);
+                anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.removeEventListener('scroll', handleScrollResize);
+                tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.removeEventListener('scroll', handleScrollResize);
+            }
+            if (actualGlobalCloseEvents.resize) {
+                window.removeEventListener('resize', handleScrollResize);
+            }
+            if (updateTooltipCleanup) {
+                updateTooltipCleanup();
+            }
+            if (actualGlobalCloseEvents.escape) {
+                window.removeEventListener('keydown', handleEsc);
+            }
+            if (actualGlobalCloseEvents.clickOutsideAnchor) {
+                window.removeEventListener('click', handleClickOutsideAnchors);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [actualGlobalCloseEvents, activeAnchor]);
+};
+
+// Shared across all tooltip instances — the CSS variable is on :root and never changes per-instance
+let globalTransitionShowDelay = null;
+const Tooltip = ({ 
+// props
+forwardRef, id, className, classNameArrow, variant = 'dark', portalRoot, anchorSelect, place = 'top', offset = 10, openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, autoClose, float = false, hidden = false, noArrow = false, clickable = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly, style: externalStyles, position, afterShow, afterHide, disableTooltip, 
+// props handled by controller
+content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousActiveAnchor, activeAnchor, setActiveAnchor, border, opacity, arrowColor, arrowSize = 8, role = 'tooltip', }) => {
+    var _a;
+    const tooltipRef = useRef(null);
+    const tooltipArrowRef = useRef(null);
+    const tooltipShowDelayTimerRef = useRef(null);
+    const tooltipHideDelayTimerRef = useRef(null);
+    const tooltipAutoCloseTimerRef = useRef(null);
+    const missedTransitionTimerRef = useRef(null);
+    const [computedPosition, setComputedPosition] = useState({
+        tooltipStyles: {},
+        tooltipArrowStyles: {},
+        place,
+    });
+    const [show, setShow] = useState(false);
+    const [rendered, setRendered] = useState(false);
+    const [imperativeOptions, setImperativeOptions] = useState(null);
+    const wasShowing = useRef(false);
+    const lastFloatPosition = useRef(null);
+    const hoveringTooltip = useRef(false);
+    const mounted = useRef(false);
+    const virtualElementRef = useRef({
+        getBoundingClientRect: () => ({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+        }),
+    });
+    /**
+     * useLayoutEffect runs before useEffect,
+     * but should be used carefully because of caveats
+     * https://beta.reactjs.org/reference/react/useLayoutEffect#caveats
+     */
+    useIsomorphicLayoutEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    const handleShow = useCallback((value) => {
+        if (!mounted.current) {
+            return;
+        }
+        if (value) {
+            setRendered(true);
+        }
+        /**
+         * wait for the component to render and calculate position
+         * before actually showing
+         */
+        setTimeout(() => {
+            if (!mounted.current) {
+                return;
+            }
+            setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(value);
+            if (isOpen === undefined) {
+                setShow(value);
+            }
+        }, 10);
+    }, [isOpen, setIsOpen]);
+    /**
+     * Add aria-describedby to activeAnchor when tooltip is active
+     */
+    useEffect(() => {
+        if (!id)
+            return;
+        function getAriaDescribedBy(element) {
+            var _a;
+            return ((_a = element === null || element === void 0 ? void 0 : element.getAttribute('aria-describedby')) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
+        }
+        function removeAriaDescribedBy(element) {
+            const newDescribedBy = getAriaDescribedBy(element).filter((s) => s !== id);
+            if (newDescribedBy.length) {
+                element === null || element === void 0 ? void 0 : element.setAttribute('aria-describedby', newDescribedBy.join(' '));
+            }
+            else {
+                element === null || element === void 0 ? void 0 : element.removeAttribute('aria-describedby');
+            }
+        }
+        if (show) {
+            removeAriaDescribedBy(previousActiveAnchor);
+            const currentDescribedBy = getAriaDescribedBy(activeAnchor);
+            const describedBy = [...new Set([...currentDescribedBy, id])].filter(Boolean).join(' ');
+            activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.setAttribute('aria-describedby', describedBy);
+        }
+        else {
+            removeAriaDescribedBy(activeAnchor);
+        }
+        return () => {
+            // cleanup aria-describedby when the tooltip is closed
+            removeAriaDescribedBy(activeAnchor);
+            removeAriaDescribedBy(previousActiveAnchor);
+        };
+    }, [activeAnchor, show, id, previousActiveAnchor]);
+    /**
+     * this replicates the effect from `handleShow()`
+     * when `isOpen` is changed from outside
+     */
+    useEffect(() => {
+        if (isOpen === undefined) {
+            return () => null;
+        }
+        if (isOpen) {
+            setRendered(true);
+        }
+        const timeout = setTimeout(() => {
+            setShow(isOpen);
+        }, 10);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [isOpen]);
+    useEffect(() => {
+        if (show === wasShowing.current) {
+            return;
+        }
+        clearTimeoutRef(missedTransitionTimerRef);
+        wasShowing.current = show;
+        if (show) {
+            afterShow === null || afterShow === void 0 ? void 0 : afterShow();
+        }
+        else {
+            /**
+             * see `onTransitionEnd` on tooltip wrapper
+             */
+            if (globalTransitionShowDelay === null) {
+                const style = getComputedStyle(document.body);
+                globalTransitionShowDelay = cssTimeToMs(style.getPropertyValue('--rt-transition-show-delay'));
+            }
+            const transitionShowDelay = globalTransitionShowDelay;
+            missedTransitionTimerRef.current = setTimeout(() => {
+                /**
+                 * if the tooltip switches from `show === true` to `show === false` too fast
+                 * the transition never runs, so `onTransitionEnd` callback never gets fired
+                 */
+                setRendered(false);
+                setImperativeOptions(null);
+                afterHide === null || afterHide === void 0 ? void 0 : afterHide();
+                // +25ms just to make sure `onTransitionEnd` (if it gets fired) has time to run
+            }, transitionShowDelay + 25);
+        }
+    }, [afterHide, afterShow, show]);
+    useEffect(() => {
+        clearTimeoutRef(tooltipAutoCloseTimerRef);
+        if (!show || !autoClose || autoClose <= 0) {
+            return () => {
+                clearTimeoutRef(tooltipAutoCloseTimerRef);
+            };
+        }
+        tooltipAutoCloseTimerRef.current = setTimeout(() => {
+            handleShow(false);
+        }, autoClose);
+        return () => {
+            clearTimeoutRef(tooltipAutoCloseTimerRef);
+        };
+    }, [activeAnchor, autoClose, handleShow, show]);
+    const handleComputedPosition = useCallback((newComputedPosition) => {
+        if (!mounted.current) {
+            return;
+        }
+        setComputedPosition((oldComputedPosition) => {
+            if (oldComputedPosition.place === newComputedPosition.place &&
+                oldComputedPosition.tooltipStyles.left === newComputedPosition.tooltipStyles.left &&
+                oldComputedPosition.tooltipStyles.top === newComputedPosition.tooltipStyles.top &&
+                oldComputedPosition.tooltipStyles.border === newComputedPosition.tooltipStyles.border &&
+                oldComputedPosition.tooltipArrowStyles.left ===
+                    newComputedPosition.tooltipArrowStyles.left &&
+                oldComputedPosition.tooltipArrowStyles.top === newComputedPosition.tooltipArrowStyles.top &&
+                oldComputedPosition.tooltipArrowStyles.right ===
+                    newComputedPosition.tooltipArrowStyles.right &&
+                oldComputedPosition.tooltipArrowStyles.bottom ===
+                    newComputedPosition.tooltipArrowStyles.bottom &&
+                oldComputedPosition.tooltipArrowStyles.borderBottom ===
+                    newComputedPosition.tooltipArrowStyles.borderBottom &&
+                oldComputedPosition.tooltipArrowStyles.borderRight ===
+                    newComputedPosition.tooltipArrowStyles.borderRight) {
+                return oldComputedPosition;
+            }
+            return newComputedPosition;
+        });
+    }, []);
+    const handleShowTooltipDelayed = useCallback((delay = delayShow) => {
+        if (tooltipShowDelayTimerRef.current) {
+            clearTimeout(tooltipShowDelayTimerRef.current);
+        }
+        if (rendered) {
+            // if the tooltip is already rendered, ignore delay
+            handleShow(true);
+            return;
+        }
+        tooltipShowDelayTimerRef.current = setTimeout(() => {
+            handleShow(true);
+        }, delay);
+    }, [delayShow, handleShow, rendered]);
+    const handleHideTooltipDelayed = useCallback((delay = delayHide) => {
+        if (tooltipHideDelayTimerRef.current) {
+            clearTimeout(tooltipHideDelayTimerRef.current);
+        }
+        tooltipHideDelayTimerRef.current = setTimeout(() => {
+            if (hoveringTooltip.current) {
+                return;
+            }
+            handleShow(false);
+        }, delay);
+    }, [delayHide, handleShow]);
+    const handleTooltipPosition = useCallback(({ x, y }) => {
+        var _a;
+        virtualElementRef.current.getBoundingClientRect = () => ({
+            x,
+            y,
+            width: 0,
+            height: 0,
+            top: y,
+            left: x,
+            right: x,
+            bottom: y,
+        });
+        computeTooltipPosition({
+            place: (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place) !== null && _a !== void 0 ? _a : place,
+            offset,
+            elementReference: virtualElementRef.current,
+            tooltipReference: tooltipRef.current,
+            tooltipArrowReference: tooltipArrowRef.current,
+            strategy: positionStrategy,
+            middlewares,
+            border,
+            arrowSize,
+        }).then((computedStylesData) => {
+            handleComputedPosition(computedStylesData);
+        });
+    }, [
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place,
+        place,
+        offset,
+        positionStrategy,
+        middlewares,
+        border,
+        arrowSize,
+        handleComputedPosition,
+    ]);
+    const updateTooltipPosition = useCallback(() => {
+        var _a, _b;
+        const actualPosition = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position) !== null && _a !== void 0 ? _a : position;
+        if (actualPosition) {
+            // if `position` is set, override regular and `float` positioning
+            handleTooltipPosition(actualPosition);
+            return;
+        }
+        if (float) {
+            if (lastFloatPosition.current) {
+                /*
+                  Without this, changes to `content`, `place`, `offset`, ..., will only
+                  trigger a position calculation after a `mousemove` event.
+        
+                  To see why this matters, comment this line, run `yarn dev` and click the
+                  "Hover me!" anchor.
+                */
+                handleTooltipPosition(lastFloatPosition.current);
+            }
+            // if `float` is set, override regular positioning
+            return;
         }
-        if (actualGlobalCloseEvents.clickOutsideAnchor) {
-            window.addEventListener('click', handleClickOutsideAnchors);
+        if (!(activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.isConnected)) {
+            return;
         }
-        const enabledEvents = [];
-        const handleClickOpenTooltipAnchor = (event) => {
-            if (show && (event === null || event === void 0 ? void 0 : event.target) === activeAnchor) {
-                /**
-                 * ignore clicking the anchor that was used to open the tooltip.
-                 * this avoids conflict with the click close event.
-                 */
-                return;
-            }
-            handleShowTooltip(event);
-        };
-        const handleClickCloseTooltipAnchor = (event) => {
-            if (!show || (event === null || event === void 0 ? void 0 : event.target) !== activeAnchor) {
-                /**
-                 * ignore clicking the anchor that was NOT used to open the tooltip.
-                 * this avoids closing the tooltip when clicking on a
-                 * new anchor with the tooltip already open.
-                 */
-                return;
-            }
-            handleHideTooltip();
-        };
-        const regularEvents = ['mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'focus', 'blur'];
-        const clickEvents = ['click', 'dblclick', 'mousedown', 'mouseup'];
-        Object.entries(actualOpenEvents).forEach(([event, enabled]) => {
-            if (!enabled) {
-                return;
-            }
-            if (regularEvents.includes(event)) {
-                enabledEvents.push({ event, listener: debouncedHandleShowTooltip });
-            }
-            else if (clickEvents.includes(event)) {
-                enabledEvents.push({ event, listener: handleClickOpenTooltipAnchor });
-            }
-            else ;
-        });
-        Object.entries(actualCloseEvents).forEach(([event, enabled]) => {
-            if (!enabled) {
+        computeTooltipPosition({
+            place: (_b = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place) !== null && _b !== void 0 ? _b : place,
+            offset,
+            elementReference: activeAnchor,
+            tooltipReference: tooltipRef.current,
+            tooltipArrowReference: tooltipArrowRef.current,
+            strategy: positionStrategy,
+            middlewares,
+            border,
+            arrowSize,
+        }).then((computedStylesData) => {
+            if (!mounted.current) {
+                // invalidate computed positions after remount
                 return;
             }
-            if (regularEvents.includes(event)) {
-                enabledEvents.push({ event, listener: debouncedHandleHideTooltip });
-            }
-            else if (clickEvents.includes(event)) {
-                enabledEvents.push({ event, listener: handleClickCloseTooltipAnchor });
-            }
-            else ;
-        });
-        if (float) {
-            enabledEvents.push({
-                event: 'pointermove',
-                listener: handlePointerMove,
-            });
-        }
-        const handleMouseEnterTooltip = () => {
-            hoveringTooltip.current = true;
-        };
-        const handleMouseLeaveTooltip = () => {
-            hoveringTooltip.current = false;
-            handleHideTooltip();
-        };
-        if (clickable && !hasClickEvent) {
-            // used to keep the tooltip open when hovering content.
-            // not needed if using click events.
-            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', handleMouseEnterTooltip);
-            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', handleMouseLeaveTooltip);
-        }
-        enabledEvents.forEach(({ event, listener }) => {
-            anchorElements.forEach((anchor) => {
-                anchor.addEventListener(event, listener);
-            });
+            handleComputedPosition(computedStylesData);
         });
-        return () => {
-            if (actualGlobalCloseEvents.scroll) {
-                window.removeEventListener('scroll', handleScrollResize);
-                anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.removeEventListener('scroll', handleScrollResize);
-                tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.removeEventListener('scroll', handleScrollResize);
-            }
-            if (actualGlobalCloseEvents.resize) {
-                window.removeEventListener('resize', handleScrollResize);
-            }
-            else {
-                updateTooltipCleanup === null || updateTooltipCleanup === void 0 ? void 0 : updateTooltipCleanup();
-            }
-            if (actualGlobalCloseEvents.clickOutsideAnchor) {
-                window.removeEventListener('click', handleClickOutsideAnchors);
-            }
-            if (actualGlobalCloseEvents.escape) {
-                window.removeEventListener('keydown', handleEsc);
-            }
-            if (clickable && !hasClickEvent) {
-                tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseenter', handleMouseEnterTooltip);
-                tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseleave', handleMouseLeaveTooltip);
-            }
-            enabledEvents.forEach(({ event, listener }) => {
-                anchorElements.forEach((anchor) => {
-                    anchor.removeEventListener(event, listener);
-                });
-            });
-        };
-        /**
-         * rendered is also a dependency to ensure anchor observers are re-registered
-         * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM
-         */
     }, [
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place,
+        position,
+        float,
+        activeAnchor,
+        place,
+        offset,
+        positionStrategy,
+        middlewares,
+        border,
+        handleTooltipPosition,
+        handleComputedPosition,
+        arrowSize,
+    ]);
+    const handleActiveAnchorRemoved = useCallback(() => {
+        setRendered(false);
+        handleShow(false);
+        setActiveAnchor(null);
+        clearTimeoutRef(tooltipShowDelayTimerRef);
+        clearTimeoutRef(tooltipHideDelayTimerRef);
+        clearTimeoutRef(tooltipAutoCloseTimerRef);
+    }, [handleShow, setActiveAnchor]);
+    const shouldTrackAnchors = rendered ||
+        defaultIsOpen ||
+        Boolean(isOpen) ||
+        Boolean(activeAnchor) ||
+        Boolean(imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect);
+    const { anchorElements, selector: anchorSelector } = useTooltipAnchors({
+        id,
+        anchorSelect,
+        imperativeAnchorSelect: imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect,
+        activeAnchor,
+        disableTooltip,
+        onActiveAnchorRemoved: handleActiveAnchorRemoved,
+        trackAnchors: shouldTrackAnchors,
+    });
+    useTooltipEvents({
         activeAnchor,
         anchorElements,
+        anchorSelector,
         clickable,
         closeEvents,
         delayHide,
         delayShow,
+        disableTooltip,
         float,
         globalCloseEvents,
         handleHideTooltipDelayed,
         handleShow,
         handleShowTooltipDelayed,
         handleTooltipPosition,
+        hoveringTooltip,
         imperativeModeOnly,
+        lastFloatPosition,
         openEvents,
         openOnClick,
         setActiveAnchor,
         show,
+        tooltipHideDelayTimerRef,
+        tooltipRef,
+        tooltipShowDelayTimerRef,
         updateTooltipPosition,
-    ]);
-    useEffect(() => {
-        var _a, _b;
-        /**
-         * TODO(V6): break down observer callback for clarity
-         *   - `handleAddedAnchors()`
-         *   - `handleRemovedAnchors()`
-         */
-        let selector = (_b = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect) !== null && _a !== void 0 ? _a : anchorSelect) !== null && _b !== void 0 ? _b : '';
-        if (!selector && id) {
-            selector = `[data-tooltip-id='${id.replace(/'/g, "\\'")}']`;
-        }
-        const documentObserverCallback = (mutationList) => {
-            const addedAnchors = new Set();
-            const removedAnchors = new Set();
-            mutationList.forEach((mutation) => {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'data-tooltip-id') {
-                    const target = mutation.target;
-                    const newId = target.getAttribute('data-tooltip-id');
-                    if (newId === id) {
-                        addedAnchors.add(target);
-                    }
-                    else if (mutation.oldValue === id) {
-                        // data-tooltip-id has now been changed, so we need to remove this anchor
-                        removedAnchors.add(target);
-                    }
-                }
-                if (mutation.type !== 'childList') {
-                    return;
-                }
-                const removedNodes = [...mutation.removedNodes].filter((node) => node.nodeType === 1);
-                if (activeAnchor) {
-                    removedNodes.some((node) => {
-                        var _a;
-                        /**
-                         * TODO(V6)
-                         *   - isn't `!activeAnchor.isConnected` better?
-                         *   - maybe move to `handleDisconnectedAnchor()`
-                         */
-                        if ((_a = node === null || node === void 0 ? void 0 : node.contains) === null || _a === void 0 ? void 0 : _a.call(node, activeAnchor)) {
-                            setRendered(false);
-                            handleShow(false);
-                            setActiveAnchor(null);
-                            clearTimeoutRef(tooltipShowDelayTimerRef);
-                            clearTimeoutRef(tooltipHideDelayTimerRef);
-                            return true;
-                        }
-                        return false;
-                    });
-                }
-                if (!selector) {
-                    return;
-                }
-                try {
-                    removedNodes.forEach((node) => {
-                        const element = node;
-                        if (element.matches(selector)) {
-                            // the element itself is an anchor
-                            removedAnchors.add(element);
-                        }
-                        else {
-                            /**
-                             * TODO(V6): do we care if an element which is an anchor,
-                             * has children which are also anchors?
-                             * (i.e. should we remove `else` and always do this)
-                             */
-                            // the element has children which are anchors
-                            element
-                                .querySelectorAll(selector)
-                                .forEach((innerNode) => removedAnchors.add(innerNode));
-                        }
-                    });
-                }
-                catch (_a) {
-                    /* c8 ignore start */
-                    {
-                        // eslint-disable-next-line no-console
-                        console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`);
-                    }
-                    /* c8 ignore end */
-                }
-                try {
-                    const addedNodes = [...mutation.addedNodes].filter((node) => node.nodeType === 1);
-                    addedNodes.forEach((node) => {
-                        const element = node;
-                        if (element.matches(selector)) {
-                            // the element itself is an anchor
-                            addedAnchors.add(element);
-                        }
-                        else {
-                            /**
-                             * TODO(V6): do we care if an element which is an anchor,
-                             * has children which are also anchors?
-                             * (i.e. should we remove `else` and always do this)
-                             */
-                            // the element has children which are anchors
-                            element
-                                .querySelectorAll(selector)
-                                .forEach((innerNode) => addedAnchors.add(innerNode));
-                        }
-                    });
-                }
-                catch (_b) {
-                    /* c8 ignore start */
-                    {
-                        // eslint-disable-next-line no-console
-                        console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`);
-                    }
-                    /* c8 ignore end */
-                }
-            });
-            if (addedAnchors.size || removedAnchors.size) {
-                setAnchorElements((anchors) => [
-                    ...anchors.filter((anchor) => !removedAnchors.has(anchor)),
-                    ...addedAnchors,
-                ]);
-            }
-        };
-        const documentObserver = new MutationObserver(documentObserverCallback);
-        // watch for anchor being removed from the DOM
-        documentObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['data-tooltip-id'],
-            // to track the prev value if we need to remove anchor when data-tooltip-id gets changed
-            attributeOldValue: true,
-        });
-        return () => {
-            documentObserver.disconnect();
-        };
-    }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect, activeAnchor, handleShow, setActiveAnchor]);
+    });
+    const updateTooltipPositionRef = useRef(updateTooltipPosition);
+    updateTooltipPositionRef.current = updateTooltipPosition;
     useEffect(() => {
+        if (!rendered) {
+            return;
+        }
         updateTooltipPosition();
-    }, [updateTooltipPosition]);
+    }, [rendered, updateTooltipPosition]);
     useEffect(() => {
-        if (!(contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current)) {
+        if (!rendered || !(contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current)) {
             return () => null;
         }
+        let timeoutId = null;
         const contentObserver = new ResizeObserver(() => {
-            setTimeout(() => updateTooltipPosition());
+            // Clear any existing timeout to prevent memory leaks
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = setTimeout(() => {
+                if (mounted.current) {
+                    updateTooltipPositionRef.current();
+                }
+                timeoutId = null;
+            }, 0);
         });
         contentObserver.observe(contentWrapperRef.current);
         return () => {
             contentObserver.disconnect();
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
         };
-    }, [content, contentWrapperRef, updateTooltipPosition]);
+    }, [content, contentWrapperRef, rendered]);
     useEffect(() => {
         var _a;
+        const shouldResolveInitialActiveAnchor = rendered || defaultIsOpen || Boolean(isOpen);
+        if (!shouldResolveInitialActiveAnchor) {
+            return;
+        }
+        const activeAnchorMatchesImperativeSelector = (() => {
+            if (!activeAnchor || !(imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect)) {
+                return false;
+            }
+            try {
+                return activeAnchor.matches(imperativeOptions.anchorSelect);
+            }
+            catch (_a) {
+                return false;
+            }
+        })();
         if (!activeAnchor || !anchorElements.includes(activeAnchor)) {
             /**
              * if there is no active anchor,
              * or if the current active anchor is not amongst the allowed ones,
              * reset it
              */
+            if (activeAnchorMatchesImperativeSelector) {
+                return;
+            }
             setActiveAnchor((_a = anchorElements[0]) !== null && _a !== void 0 ? _a : null);
         }
-    }, [anchorElements, activeAnchor, setActiveAnchor]);
+    }, [
+        activeAnchor,
+        anchorElements,
+        defaultIsOpen,
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect,
+        isOpen,
+        rendered,
+        setActiveAnchor,
+    ]);
     useEffect(() => {
         if (defaultIsOpen) {
             handleShow(true);
@@ -949,26 +1447,10 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         return () => {
             clearTimeoutRef(tooltipShowDelayTimerRef);
             clearTimeoutRef(tooltipHideDelayTimerRef);
+            clearTimeoutRef(tooltipAutoCloseTimerRef);
+            clearTimeoutRef(missedTransitionTimerRef);
         };
     }, [defaultIsOpen, handleShow]);
-    useEffect(() => {
-        var _a;
-        let selector = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect) !== null && _a !== void 0 ? _a : anchorSelect;
-        if (!selector && id) {
-            selector = `[data-tooltip-id='${id.replace(/'/g, "\\'")}']`;
-        }
-        if (!selector) {
-            return;
-        }
-        try {
-            const anchors = Array.from(document.querySelectorAll(selector));
-            setAnchorElements(anchors);
-        }
-        catch (_b) {
-            // warning was already issued in the controller
-            setAnchorElements([]);
-        }
-    }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
     useEffect(() => {
         if (tooltipShowDelayTimerRef.current) {
             /**
@@ -980,20 +1462,37 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         }
     }, [delayShow, handleShowTooltipDelayed]);
     const actualContent = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.content) !== null && _a !== void 0 ? _a : content;
-    const canShow = show && Object.keys(computedPosition.tooltipStyles).length > 0;
+    const hasContent = actualContent !== null && actualContent !== undefined;
+    const canShow = show && computedPosition.tooltipStyles.left !== undefined;
+    const tooltipStyle = useMemo(() => ({
+        ...externalStyles,
+        ...computedPosition.tooltipStyles,
+        opacity: opacity !== undefined && canShow ? opacity : undefined,
+    }), [externalStyles, computedPosition.tooltipStyles, opacity, canShow]);
+    const arrowBackground = useMemo(() => arrowColor
+        ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
+        : undefined, [arrowColor]);
+    const arrowStyle = useMemo(() => ({
+        ...computedPosition.tooltipArrowStyles,
+        background: arrowBackground,
+        '--rt-arrow-size': `${arrowSize}px`,
+    }), [computedPosition.tooltipArrowStyles, arrowBackground, arrowSize]);
     useImperativeHandle(forwardRef, () => ({
         open: (options) => {
+            let imperativeAnchor = null;
             if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
                 try {
-                    document.querySelector(options.anchorSelect);
+                    imperativeAnchor = document.querySelector(options.anchorSelect);
                 }
                 catch (_a) {
-                    {
-                        // eslint-disable-next-line no-console
-                        console.warn(`[react-tooltip] "${options.anchorSelect}" is not a valid CSS selector`);
-                    }
                     return;
                 }
+                if (!imperativeAnchor) {
+                    return;
+                }
+            }
+            if (imperativeAnchor) {
+                setActiveAnchor(imperativeAnchor);
             }
             setImperativeOptions(options !== null && options !== void 0 ? options : null);
             if (options === null || options === void 0 ? void 0 : options.delay) {
@@ -1013,9 +1512,18 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         },
         activeAnchor,
         place: computedPosition.place,
-        isOpen: Boolean(rendered && !hidden && actualContent && canShow),
+        isOpen: Boolean(rendered && !hidden && hasContent && canShow),
     }));
-    return rendered && !hidden && actualContent ? (React.createElement(WrapperElement, { id: id, role: role, className: clsx('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${computedPosition.place}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
+    useEffect(() => {
+        return () => {
+            // Final cleanup to ensure no memory leaks
+            clearTimeoutRef(tooltipShowDelayTimerRef);
+            clearTimeoutRef(tooltipHideDelayTimerRef);
+            clearTimeoutRef(tooltipAutoCloseTimerRef);
+            clearTimeoutRef(missedTransitionTimerRef);
+        };
+    }, []);
+    const tooltipNode = rendered && !hidden && hasContent ? (React.createElement(WrapperElement, { id: id, role: role, className: clsx('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${computedPosition.place}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
             clearTimeoutRef(missedTransitionTimerRef);
             if (show || event.propertyName !== 'opacity') {
                 return;
@@ -1023,34 +1531,96 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             setRendered(false);
             setImperativeOptions(null);
             afterHide === null || afterHide === void 0 ? void 0 : afterHide();
-        }, style: {
-            ...externalStyles,
-            ...computedPosition.tooltipStyles,
-            opacity: opacity !== undefined && canShow ? opacity : undefined,
-        }, ref: tooltipRef },
-        actualContent,
-        React.createElement(WrapperElement, { className: clsx('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
-                ...computedPosition.tooltipArrowStyles,
-                background: arrowColor
-                    ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
-                    : undefined,
-            }, ref: tooltipArrowRef }))) : null;
+        }, style: tooltipStyle, ref: tooltipRef },
+        React.createElement(WrapperElement, { className: clsx('react-tooltip-content-wrapper', coreStyles['content'], styles['content']) }, actualContent),
+        React.createElement(WrapperElement, { className: clsx('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: arrowStyle, ref: tooltipArrowRef }))) : null;
+    if (!tooltipNode) {
+        return null;
+    }
+    if (portalRoot) {
+        return createPortal(tooltipNode, portalRoot);
+    }
+    return tooltipNode;
+};
+var Tooltip$1 = memo(Tooltip);
+
+/**
+ * Shared MutationObserver for data-tooltip-* attribute changes.
+ * Instead of N observers (one per tooltip), a single observer watches
+ * all active anchors and dispatches changes to registered callbacks.
+ */
+const observedElements = new Map();
+let sharedObserver = null;
+const observerConfig = {
+    attributes: true,
+    childList: false,
+    subtree: false,
 };
+function getObserver() {
+    if (!sharedObserver) {
+        sharedObserver = new MutationObserver((mutationList) => {
+            var _a;
+            for (const mutation of mutationList) {
+                if (mutation.type !== 'attributes' ||
+                    !((_a = mutation.attributeName) === null || _a === void 0 ? void 0 : _a.startsWith('data-tooltip-'))) {
+                    continue;
+                }
+                const target = mutation.target;
+                const callbacks = observedElements.get(target);
+                if (callbacks) {
+                    callbacks.forEach((cb) => cb(target));
+                }
+            }
+        });
+    }
+    return sharedObserver;
+}
+function observeAnchorAttributes(element, callback) {
+    const observer = getObserver();
+    let callbacks = observedElements.get(element);
+    if (!callbacks) {
+        callbacks = new Set();
+        observedElements.set(element, callbacks);
+        observer.observe(element, observerConfig);
+    }
+    callbacks.add(callback);
+    return () => {
+        const cbs = observedElements.get(element);
+        if (cbs) {
+            cbs.delete(callback);
+            if (cbs.size === 0) {
+                observedElements.delete(element);
+                // MutationObserver doesn't have unobserve — if no elements left, disconnect & reset
+                if (observedElements.size === 0) {
+                    observer.disconnect();
+                }
+                else {
+                    // Re-observe remaining elements (MutationObserver has no per-target unobserve)
+                    observer.disconnect();
+                    observedElements.forEach((_cbs, el) => {
+                        observer.observe(el, observerConfig);
+                    });
+                }
+            }
+        }
+    };
+}
 
-const TooltipController = React.forwardRef(({ id, anchorSelect, content, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly = false, style, position, isOpen, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, role = 'tooltip', }, ref) => {
-    const [tooltipContent, setTooltipContent] = useState(content);
-    const [tooltipPlace, setTooltipPlace] = useState(place);
-    const [tooltipVariant, setTooltipVariant] = useState(variant);
-    const [tooltipOffset, setTooltipOffset] = useState(offset);
-    const [tooltipDelayShow, setTooltipDelayShow] = useState(delayShow);
-    const [tooltipDelayHide, setTooltipDelayHide] = useState(delayHide);
-    const [tooltipFloat, setTooltipFloat] = useState(float);
-    const [tooltipHidden, setTooltipHidden] = useState(hidden);
-    const [tooltipWrapper, setTooltipWrapper] = useState(wrapper);
-    const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy);
-    const [tooltipClassName, setTooltipClassName] = useState(null);
+const TooltipController = React.forwardRef(({ id, anchorSelect, content, render, className, classNameArrow, variant = 'dark', portalRoot, place = 'top', offset = 10, wrapper = 'div', children = null, openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, autoClose, float = false, hidden = false, noArrow = false, clickable = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly = false, style, position, isOpen, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, arrowSize, setIsOpen, afterShow, afterHide, disableTooltip, role = 'tooltip', }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const [activeAnchor, setActiveAnchor] = useState(null);
+    const [anchorDataAttributes, setAnchorDataAttributes] = useState({});
+    const previousActiveAnchorRef = useRef(null);
     const styleInjectionRef = useRef(disableStyleInjection);
+    const handleSetActiveAnchor = useCallback((anchor) => {
+        setActiveAnchor((prev) => {
+            if (!(anchor === null || anchor === void 0 ? void 0 : anchor.isSameNode(prev))) {
+                previousActiveAnchorRef.current = prev;
+            }
+            return anchor;
+        });
+    }, []);
+    /* c8 ignore start */
     const getDataAttributesFromAnchorElement = (elementReference) => {
         const dataAttributes = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttributeNames().reduce((acc, name) => {
             var _a;
@@ -1062,101 +1632,11 @@ const TooltipController = React.forwardRef(({ id, anchorSelect, content, render,
         }, {});
         return dataAttributes;
     };
-    const applyAllDataAttributesFromAnchorElement = useCallback((dataAttributes) => {
-        const handleDataAttributes = {
-            place: (value) => {
-                var _a;
-                setTooltipPlace((_a = value) !== null && _a !== void 0 ? _a : place);
-            },
-            content: (value) => {
-                setTooltipContent(value !== null && value !== void 0 ? value : content);
-            },
-            variant: (value) => {
-                var _a;
-                setTooltipVariant((_a = value) !== null && _a !== void 0 ? _a : variant);
-            },
-            offset: (value) => {
-                setTooltipOffset(value === null ? offset : Number(value));
-            },
-            wrapper: (value) => {
-                var _a;
-                setTooltipWrapper((_a = value) !== null && _a !== void 0 ? _a : wrapper);
-            },
-            'position-strategy': (value) => {
-                var _a;
-                setTooltipPositionStrategy((_a = value) !== null && _a !== void 0 ? _a : positionStrategy);
-            },
-            'delay-show': (value) => {
-                setTooltipDelayShow(value === null ? delayShow : Number(value));
-            },
-            'delay-hide': (value) => {
-                setTooltipDelayHide(value === null ? delayHide : Number(value));
-            },
-            float: (value) => {
-                setTooltipFloat(value === null ? float : value === 'true');
-            },
-            hidden: (value) => {
-                setTooltipHidden(value === null ? hidden : value === 'true');
-            },
-            'class-name': (value) => {
-                setTooltipClassName(value);
-            },
-        };
-        // reset unset data attributes to default values
-        // without this, data attributes from the last active anchor will still be used
-        Object.values(handleDataAttributes).forEach((handler) => handler(null));
-        Object.entries(dataAttributes).forEach(([key, value]) => {
-            var _a;
-            (_a = handleDataAttributes[key]) === null || _a === void 0 ? void 0 : _a.call(handleDataAttributes, value);
-        });
-    }, [
-        content,
-        delayHide,
-        delayShow,
-        float,
-        hidden,
-        offset,
-        place,
-        positionStrategy,
-        variant,
-        wrapper,
-    ]);
-    useEffect(() => {
-        setTooltipContent(content);
-    }, [content]);
-    useEffect(() => {
-        setTooltipPlace(place);
-    }, [place]);
-    useEffect(() => {
-        setTooltipVariant(variant);
-    }, [variant]);
-    useEffect(() => {
-        setTooltipOffset(offset);
-    }, [offset]);
-    useEffect(() => {
-        setTooltipDelayShow(delayShow);
-    }, [delayShow]);
-    useEffect(() => {
-        setTooltipDelayHide(delayHide);
-    }, [delayHide]);
-    useEffect(() => {
-        setTooltipFloat(float);
-    }, [float]);
-    useEffect(() => {
-        setTooltipHidden(hidden);
-    }, [hidden]);
-    useEffect(() => {
-        setTooltipPositionStrategy(positionStrategy);
-    }, [positionStrategy]);
+    /* c8 ignore end */
     useEffect(() => {
         if (styleInjectionRef.current === disableStyleInjection) {
             return;
         }
-        /* c8 ignore start */
-        {
-            // eslint-disable-next-line no-console
-            console.warn('[react-tooltip] Do not change `disableStyleInjection` dynamically.');
-        }
         /* c8 ignore end */
     }, [disableStyleInjection]);
     useEffect(() => {
@@ -1171,58 +1651,61 @@ const TooltipController = React.forwardRef(({ id, anchorSelect, content, render,
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        const observerCallback = (mutationList) => {
-            mutationList.forEach((mutation) => {
-                var _a;
-                if (!activeAnchor ||
-                    mutation.type !== 'attributes' ||
-                    !((_a = mutation.attributeName) === null || _a === void 0 ? void 0 : _a.startsWith('data-tooltip-'))) {
-                    return;
+        if (!activeAnchor) {
+            setAnchorDataAttributes({});
+            return () => { };
+        }
+        const updateAttributes = (element) => {
+            const attrs = getDataAttributesFromAnchorElement(element);
+            setAnchorDataAttributes((prev) => {
+                const keys = Object.keys(attrs);
+                const prevKeys = Object.keys(prev);
+                if (keys.length === prevKeys.length && keys.every((key) => attrs[key] === prev[key])) {
+                    return prev;
                 }
-                // make sure to get all set attributes, since all unset attributes are reset
-                const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor);
-                applyAllDataAttributesFromAnchorElement(dataAttributes);
+                return attrs;
             });
         };
-        // Create an observer instance linked to the callback function
-        const observer = new MutationObserver(observerCallback);
-        // do not check for subtree and childrens, we only want to know attribute changes
-        // to stay watching `data-attributes-*` from anchor element
-        const observerConfig = { attributes: true, childList: false, subtree: false };
-        if (activeAnchor) {
-            const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor);
-            applyAllDataAttributesFromAnchorElement(dataAttributes);
-            // Start observing the target node for configured mutations
-            observer.observe(activeAnchor, observerConfig);
-        }
-        return () => {
-            // Remove the observer when the tooltip is destroyed
-            observer.disconnect();
-        };
-    }, [activeAnchor, anchorSelect, applyAllDataAttributesFromAnchorElement]);
+        updateAttributes(activeAnchor);
+        const unsubscribe = observeAnchorAttributes(activeAnchor, updateAttributes);
+        return unsubscribe;
+    }, [activeAnchor, anchorSelect]);
     useEffect(() => {
-        /* c8 ignore end */
-        if (style === null || style === void 0 ? void 0 : style.border) {
-            // eslint-disable-next-line no-console
-            console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.');
-        }
-        if (style === null || style === void 0 ? void 0 : style.opacity) {
-            // eslint-disable-next-line no-console
-            console.warn('[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead.');
+        /* c8 ignore start */
+        {
+            return;
         }
     }, [border, opacity, style === null || style === void 0 ? void 0 : style.border, style === null || style === void 0 ? void 0 : style.opacity]);
     /**
      * content priority: children < render or content < html
      * children should be lower priority so that it can be used as the "default" content
      */
+    const tooltipContent = (_a = anchorDataAttributes.content) !== null && _a !== void 0 ? _a : content;
+    const tooltipPlace = (_b = anchorDataAttributes.place) !== null && _b !== void 0 ? _b : place;
+    const tooltipVariant = (_c = anchorDataAttributes.variant) !== null && _c !== void 0 ? _c : variant;
+    const tooltipOffset = anchorDataAttributes.offset == null ? offset : Number(anchorDataAttributes.offset);
+    const tooltipWrapper = (_d = anchorDataAttributes.wrapper) !== null && _d !== void 0 ? _d : wrapper;
+    const tooltipPositionStrategy = (_e = anchorDataAttributes['position-strategy']) !== null && _e !== void 0 ? _e : positionStrategy;
+    const tooltipDelayShow = anchorDataAttributes['delay-show'] == null
+        ? delayShow
+        : Number(anchorDataAttributes['delay-show']);
+    const tooltipDelayHide = anchorDataAttributes['delay-hide'] == null
+        ? delayHide
+        : Number(anchorDataAttributes['delay-hide']);
+    const tooltipAutoClose = anchorDataAttributes['auto-close'] == null
+        ? autoClose
+        : Number(anchorDataAttributes['auto-close']);
+    const tooltipFloat = anchorDataAttributes.float == null ? float : anchorDataAttributes.float === 'true';
+    const tooltipHidden = anchorDataAttributes.hidden == null ? hidden : anchorDataAttributes.hidden === 'true';
+    const tooltipClassName = (_f = anchorDataAttributes['class-name']) !== null && _f !== void 0 ? _f : null;
     let renderedContent = children;
     const contentWrapperRef = useRef(null);
     if (render) {
-        const actualContent = (activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.getAttribute('data-tooltip-content')) || tooltipContent || null;
+        const actualContent = (_h = (_g = anchorDataAttributes.content) !== null && _g !== void 0 ? _g : tooltipContent) !== null && _h !== void 0 ? _h : null;
         const rendered = render({ content: actualContent, activeAnchor });
         renderedContent = rendered ? (React.createElement("div", { ref: contentWrapperRef, className: "react-tooltip-content-wrapper" }, rendered)) : null;
     }
-    else if (tooltipContent) {
+    else if (tooltipContent !== null && tooltipContent !== undefined) {
         renderedContent = tooltipContent;
     }
     const props = {
@@ -1233,6 +1716,7 @@ const TooltipController = React.forwardRef(({ id, anchorSelect, content, render,
         classNameArrow,
         content: renderedContent,
         contentWrapperRef,
+        portalRoot,
         place: tooltipPlace,
         variant: tooltipVariant,
         offset: tooltipOffset,
@@ -1242,6 +1726,7 @@ const TooltipController = React.forwardRef(({ id, anchorSelect, content, render,
         middlewares,
         delayShow: tooltipDelayShow,
         delayHide: tooltipDelayHide,
+        autoClose: tooltipAutoClose,
         float: tooltipFloat,
         hidden: tooltipHidden,
         noArrow,
@@ -1257,15 +1742,19 @@ const TooltipController = React.forwardRef(({ id, anchorSelect, content, render,
         border,
         opacity,
         arrowColor,
+        arrowSize,
         setIsOpen,
         afterShow,
         afterHide,
+        disableTooltip,
         activeAnchor,
-        setActiveAnchor,
+        previousActiveAnchor: previousActiveAnchorRef.current,
+        setActiveAnchor: handleSetActiveAnchor,
         role,
     };
-    return React.createElement(Tooltip, { ...props });
+    return React.createElement(Tooltip$1, { ...props });
 });
+var TooltipController_default = memo(TooltipController);
 
 // those content will be replaced in build time with the `react-tooltip.css` builded content
 const TooltipCoreStyles = `:root {
@@ -1278,6 +1767,7 @@ const TooltipCoreStyles = `:root {
   --rt-opacity: 0.9;
   --rt-transition-show-delay: 0.15s;
   --rt-transition-closing-delay: 0.15s;
+  --rt-arrow-size: 8px;
 }
 
 .core-styles-module_tooltip__3vRRp {
@@ -1286,7 +1776,6 @@ const TooltipCoreStyles = `:root {
   left: 0;
   pointer-events: none;
   opacity: 0;
-  will-change: opacity;
 }
 
 .core-styles-module_fixed__pcSol {
@@ -1296,6 +1785,14 @@ const TooltipCoreStyles = `:root {
 .core-styles-module_arrow__cvMwQ {
   position: absolute;
   background: inherit;
+  z-index: -1;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.core-styles-module_content__BRKdB {
+  position: relative;
+  z-index: 1;
 }
 
 .core-styles-module_noArrow__xock6 {
@@ -1309,26 +1806,33 @@ const TooltipCoreStyles = `:root {
 .core-styles-module_show__Nt9eE {
   opacity: var(--rt-opacity);
   transition: opacity var(--rt-transition-show-delay) ease-out;
+  will-change: opacity;
 }
 
 .core-styles-module_closing__sGnxF {
   opacity: 0;
   transition: opacity var(--rt-transition-closing-delay) ease-in;
+  will-change: opacity;
 }
 
 `;
 const TooltipStyles = `
 
 .styles-module_tooltip__mnnfp {
-  padding: 8px 16px;
   border-radius: 3px;
   font-size: 90%;
   width: max-content;
 }
 
+.styles-module_content__ydYdI {
+  background: inherit;
+  border-radius: inherit;
+  padding: 8px 16px;
+}
+
 .styles-module_arrow__K0L3T {
-  width: 8px;
-  height: 8px;
+  width: var(--rt-arrow-size);
+  height: var(--rt-arrow-size);
 }
 
 [class*='react-tooltip__place-top'] > .styles-module_arrow__K0L3T {
@@ -1389,5 +1893,5 @@ if (typeof window !== 'undefined') {
     }));
 }
 
-export { TooltipController as Tooltip };
+export { TooltipController_default as Tooltip };
 //# sourceMappingURL=react-tooltip.mjs.map