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

package/dist/react-tooltip.umd.js

@@ -6,10 +6,10 @@
 * @license MIT
 */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@floating-ui/dom'), require('clsx')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@floating-ui/dom', 'clsx'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTooltip = {}, global.React, global.FloatingUIDOM, global.clsx));
-})(this, (function (exports, React, dom, clsx) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('clsx'), require('react-dom'), require('@floating-ui/dom')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'clsx', 'react-dom', '@floating-ui/dom'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTooltip = {}, global.React, global.clsx, global.ReactDOM, global.FloatingUIDOM));
+})(this, (function (exports, React, clsx, reactDom, dom) { 'use strict';
 
     // This is the ID for the core styles of ReactTooltip
     const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles';
@@ -19,27 +19,33 @@
         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;
@@ -69,26 +75,27 @@
         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 = [
-        dom.offset(Number(offsetValue)),
-        dom.flip({
-            fallbackAxisSideDirection: 'start',
-        }),
-        dom.shift({ padding: 5 }),
-    ], border, }) => {
+    // Hoisted constant middlewares — these configs never change
+    const defaultFlip = dom.flip({ fallbackAxisSideDirection: 'start' });
+    const defaultShift = dom.shift({ padding: 5 });
+    const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [dom.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(dom.arrow({ element: tooltipArrowReference, padding: 5 }));
             return dom.computePosition(elementReference, tooltipReference, {
@@ -132,7 +139,7 @@
                     right: '',
                     bottom: '',
                     ...borderSide,
-                    [staticSide]: `-${4 + borderWidth}px`,
+                    [staticSide]: `-${arrowSize / 2 + borderWidth - 1}px`,
                 };
                 /* c8 ignore end */
                 return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
@@ -166,6 +173,7 @@
      */
     const debounce = (func, wait, immediate) => {
         let timeout = null;
+        let currentFunc = func;
         const debounced = function debounced(...args) {
             const later = () => {
                 timeout = null;
@@ -175,7 +183,7 @@
                  * 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);
             }
         };
@@ -188,36 +196,12 @@
             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;
@@ -242,336 +226,390 @@
         return document.scrollingElement || document.documentElement;
     };
 
-    const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.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 ? React.useLayoutEffect : React.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 = React.useRef(null);
-        const tooltipArrowRef = React.useRef(null);
-        const tooltipShowDelayTimerRef = React.useRef(null);
-        const tooltipHideDelayTimerRef = React.useRef(null);
-        const missedTransitionTimerRef = React.useRef(null);
-        const [computedPosition, setComputedPosition] = React.useState({
-            tooltipStyles: {},
-            tooltipArrowStyles: {},
-            place,
-        });
-        const [show, setShow] = React.useState(false);
-        const [rendered, setRendered] = React.useState(false);
-        const [imperativeOptions, setImperativeOptions] = React.useState(null);
-        const wasShowing = React.useRef(false);
-        const lastFloatPosition = React.useRef(null);
-        const hoveringTooltip = React.useRef(false);
-        const [anchorElements, setAnchorElements] = React.useState([]);
-        const mounted = React.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 = React.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
-         */
-        React.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]);
-        React.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 = React.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] = React.useState([]);
+        const [selectorError, setSelectorError] = React.useState(null);
+        const warnedSelectorRef = React.useRef(null);
+        const selector = React.useMemo(() => getAnchorSelector({ id, anchorSelect, imperativeAnchorSelect }), [id, anchorSelect, imperativeAnchorSelect]);
+        const anchorElements = React.useMemo(() => rawAnchorElements.filter((anchor) => !(disableTooltip === null || disableTooltip === void 0 ? void 0 : disableTooltip(anchor))), [rawAnchorElements, disableTooltip]);
+        const activeAnchorMatchesSelector = React.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 = React.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 = React.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]);
+        React.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 = React.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]);
+        React.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]);
+        React.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,
-        ]);
-        React.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 = React.useRef(debounce((_anchor) => { }, 50));
+        const debouncedHideRef = React.useRef(debounce(() => { }, 50));
+        // Cache scroll parents — only recompute when the element actually changes
+        const anchorScrollParentRef = React.useRef(null);
+        const tooltipScrollParentRef = React.useRef(null);
+        const prevAnchorRef = React.useRef(null);
+        const prevTooltipRef = React.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 = React.useMemo(() => {
+            const events = openEvents
                 ? { ...openEvents }
                 : {
                     mouseenter: true,
@@ -581,13 +619,25 @@
                     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 = React.useMemo(() => {
+            const events = closeEvents
                 ? { ...closeEvents }
                 : {
                     mouseleave: true,
@@ -597,12 +647,24 @@
                     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 = React.useMemo(() => {
+            const events = globalCloseEvents
                 ? { ...globalCloseEvents }
                 : {
                     escape: false,
@@ -611,30 +673,276 @@
                     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 = React.useRef(activeAnchor);
+        activeAnchorRef.current = activeAnchor;
+        const showRef = React.useRef(show);
+        showRef.current = show;
+        const anchorElementsRef = React.useRef(anchorElements);
+        anchorElementsRef.current = anchorElements;
+        const handleShowRef = React.useRef(handleShow);
+        handleShowRef.current = handleShow;
+        const handleTooltipPositionRef = React.useRef(handleTooltipPosition);
+        handleTooltipPositionRef.current = handleTooltipPosition;
+        const updateTooltipPositionRef = React.useRef(updateTooltipPosition);
+        updateTooltipPositionRef.current = updateTooltipPosition;
+        // --- Handler refs (updated every render, read via ref indirection in effects) ---
+        const resolveAnchorElementRef = React.useRef(() => null);
+        const handleShowTooltipRef = React.useRef(() => { });
+        const handleHideTooltipRef = React.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.
+        React.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).
+        React.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);
@@ -645,7 +953,7 @@
                 window.addEventListener('resize', handleScrollResize);
             }
             else if (activeAnchor && tooltipRef.current) {
-                updateTooltipCleanup = dom.autoUpdate(activeAnchor, tooltipRef.current, updateTooltipPosition, {
+                updateTooltipCleanup = dom.autoUpdate(activeAnchor, tooltipRef.current, () => updateTooltipPositionRef.current(), {
                     ancestorResize: true,
                     elementResize: true,
                     layoutShift: true,
@@ -655,295 +963,484 @@
                 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 = React.useRef(null);
+        const tooltipArrowRef = React.useRef(null);
+        const tooltipShowDelayTimerRef = React.useRef(null);
+        const tooltipHideDelayTimerRef = React.useRef(null);
+        const tooltipAutoCloseTimerRef = React.useRef(null);
+        const missedTransitionTimerRef = React.useRef(null);
+        const [computedPosition, setComputedPosition] = React.useState({
+            tooltipStyles: {},
+            tooltipArrowStyles: {},
+            place,
+        });
+        const [show, setShow] = React.useState(false);
+        const [rendered, setRendered] = React.useState(false);
+        const [imperativeOptions, setImperativeOptions] = React.useState(null);
+        const wasShowing = React.useRef(false);
+        const lastFloatPosition = React.useRef(null);
+        const hoveringTooltip = React.useRef(false);
+        const mounted = React.useRef(false);
+        const virtualElementRef = React.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 = React.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
+         */
+        React.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
+         */
+        React.useEffect(() => {
+            if (isOpen === undefined) {
+                return () => null;
+            }
+            if (isOpen) {
+                setRendered(true);
+            }
+            const timeout = setTimeout(() => {
+                setShow(isOpen);
+            }, 10);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }, [isOpen]);
+        React.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]);
+        React.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 = React.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 = React.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 = React.useCallback((delay = delayHide) => {
+            if (tooltipHideDelayTimerRef.current) {
+                clearTimeout(tooltipHideDelayTimerRef.current);
+            }
+            tooltipHideDelayTimerRef.current = setTimeout(() => {
+                if (hoveringTooltip.current) {
+                    return;
+                }
+                handleShow(false);
+            }, delay);
+        }, [delayHide, handleShow]);
+        const handleTooltipPosition = React.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 = React.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 = React.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,
-        ]);
-        React.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 = React.useRef(updateTooltipPosition);
+        updateTooltipPositionRef.current = updateTooltipPosition;
         React.useEffect(() => {
+            if (!rendered) {
+                return;
+            }
             updateTooltipPosition();
-        }, [updateTooltipPosition]);
+        }, [rendered, updateTooltipPosition]);
         React.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]);
         React.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,
+        ]);
         React.useEffect(() => {
             if (defaultIsOpen) {
                 handleShow(true);
@@ -951,26 +1448,10 @@
             return () => {
                 clearTimeoutRef(tooltipShowDelayTimerRef);
                 clearTimeoutRef(tooltipHideDelayTimerRef);
+                clearTimeoutRef(tooltipAutoCloseTimerRef);
+                clearTimeoutRef(missedTransitionTimerRef);
             };
         }, [defaultIsOpen, handleShow]);
-        React.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]);
         React.useEffect(() => {
             if (tooltipShowDelayTimerRef.current) {
                 /**
@@ -982,20 +1463,37 @@
             }
         }, [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 = React.useMemo(() => ({
+            ...externalStyles,
+            ...computedPosition.tooltipStyles,
+            opacity: opacity !== undefined && canShow ? opacity : undefined,
+        }), [externalStyles, computedPosition.tooltipStyles, opacity, canShow]);
+        const arrowBackground = React.useMemo(() => arrowColor
+            ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
+            : undefined, [arrowColor]);
+        const arrowStyle = React.useMemo(() => ({
+            ...computedPosition.tooltipArrowStyles,
+            background: arrowBackground,
+            '--rt-arrow-size': `${arrowSize}px`,
+        }), [computedPosition.tooltipArrowStyles, arrowBackground, arrowSize]);
         React.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) {
@@ -1015,9 +1513,18 @@
             },
             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) => {
+        React.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;
@@ -1025,34 +1532,96 @@
                 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 reactDom.createPortal(tooltipNode, portalRoot);
+        }
+        return tooltipNode;
+    };
+    var Tooltip$1 = React.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] = React.useState(content);
-        const [tooltipPlace, setTooltipPlace] = React.useState(place);
-        const [tooltipVariant, setTooltipVariant] = React.useState(variant);
-        const [tooltipOffset, setTooltipOffset] = React.useState(offset);
-        const [tooltipDelayShow, setTooltipDelayShow] = React.useState(delayShow);
-        const [tooltipDelayHide, setTooltipDelayHide] = React.useState(delayHide);
-        const [tooltipFloat, setTooltipFloat] = React.useState(float);
-        const [tooltipHidden, setTooltipHidden] = React.useState(hidden);
-        const [tooltipWrapper, setTooltipWrapper] = React.useState(wrapper);
-        const [tooltipPositionStrategy, setTooltipPositionStrategy] = React.useState(positionStrategy);
-        const [tooltipClassName, setTooltipClassName] = React.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] = React.useState(null);
+        const [anchorDataAttributes, setAnchorDataAttributes] = React.useState({});
+        const previousActiveAnchorRef = React.useRef(null);
         const styleInjectionRef = React.useRef(disableStyleInjection);
+        const handleSetActiveAnchor = React.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;
@@ -1064,101 +1633,11 @@
             }, {});
             return dataAttributes;
         };
-        const applyAllDataAttributesFromAnchorElement = React.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,
-        ]);
-        React.useEffect(() => {
-            setTooltipContent(content);
-        }, [content]);
-        React.useEffect(() => {
-            setTooltipPlace(place);
-        }, [place]);
-        React.useEffect(() => {
-            setTooltipVariant(variant);
-        }, [variant]);
-        React.useEffect(() => {
-            setTooltipOffset(offset);
-        }, [offset]);
-        React.useEffect(() => {
-            setTooltipDelayShow(delayShow);
-        }, [delayShow]);
-        React.useEffect(() => {
-            setTooltipDelayHide(delayHide);
-        }, [delayHide]);
-        React.useEffect(() => {
-            setTooltipFloat(float);
-        }, [float]);
-        React.useEffect(() => {
-            setTooltipHidden(hidden);
-        }, [hidden]);
-        React.useEffect(() => {
-            setTooltipPositionStrategy(positionStrategy);
-        }, [positionStrategy]);
+        /* c8 ignore end */
         React.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]);
         React.useEffect(() => {
@@ -1173,58 +1652,61 @@
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         React.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]);
         React.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 = React.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 = {
@@ -1235,6 +1717,7 @@
             classNameArrow,
             content: renderedContent,
             contentWrapperRef,
+            portalRoot,
             place: tooltipPlace,
             variant: tooltipVariant,
             offset: tooltipOffset,
@@ -1244,6 +1727,7 @@
             middlewares,
             delayShow: tooltipDelayShow,
             delayHide: tooltipDelayHide,
+            autoClose: tooltipAutoClose,
             float: tooltipFloat,
             hidden: tooltipHidden,
             noArrow,
@@ -1259,15 +1743,19 @@
             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 = React.memo(TooltipController);
 
     // those content will be replaced in build time with the `react-tooltip.css` builded content
     const TooltipCoreStyles = `:root {
@@ -1280,6 +1768,7 @@
   --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 {
@@ -1288,7 +1777,6 @@
   left: 0;
   pointer-events: none;
   opacity: 0;
-  will-change: opacity;
 }
 
 .core-styles-module_fixed__pcSol {
@@ -1298,6 +1786,14 @@
 .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 {
@@ -1311,26 +1807,33 @@
 .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 {
@@ -1391,7 +1894,7 @@
         }));
     }
 
-    exports.Tooltip = TooltipController;
+    exports.Tooltip = TooltipController_default;
 
 }));
 //# sourceMappingURL=react-tooltip.umd.js.map