react-tooltip 6.0.0-beta.1179.rc.9 → 6.0.0

package/dist/react-tooltip.umd.js

@@ -43,11 +43,9 @@
             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;
@@ -78,7 +76,6 @@
             style.appendChild(document.createTextNode(css));
         }
         if (typeof state[type] !== 'undefined') {
-            // eslint-disable-next-line no-param-reassign
             state[type] = true;
         }
         else {
@@ -86,16 +83,12 @@
         }
     }
 
-    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, arrowSize = 8, }) => {
+    // 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 };
         }
@@ -180,6 +173,7 @@
      */
     const debounce = (func, wait, immediate) => {
         let timeout = null;
+        let currentFunc = func;
         const debounced = function debounced(...args) {
             const later = () => {
                 timeout = null;
@@ -189,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);
             }
         };
@@ -202,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;
@@ -272,17 +242,43 @@
     const clearTimeoutRef = (ref) => {
         if (ref.current) {
             clearTimeout(ref.current);
-            // eslint-disable-next-line no-param-reassign
             ref.current = null;
         }
     };
 
+    function parseDataTooltipIdSelector(selector) {
+        const match = selector.match(/^\[data-tooltip-id=(['"])((?:\\.|(?!\1).)*)\1\]$/);
+        if (!match) {
+            return null;
+        }
+        return match[2].replace(/\\(['"])/g, '$1');
+    }
+
+    function resolveDataTooltipAnchor(targetElement, tooltipId) {
+        let currentElement = targetElement;
+        while (currentElement) {
+            if (currentElement.dataset.tooltipId === tooltipId) {
+                return currentElement;
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return null;
+    }
+
     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;
@@ -304,8 +300,7 @@
         }
     }
     function notifySubscribers(entry) {
-        const anchors = [...entry.anchors];
-        entry.subscribers.forEach((subscriber) => subscriber(anchors, entry.error));
+        entry.subscribers.forEach((subscriber) => subscriber(entry.anchors, entry.error));
     }
     function refreshEntry(selector, entry) {
         var _a, _b, _c, _d;
@@ -329,12 +324,117 @@
             refreshEntry(selector, entry);
         });
     }
+    let refreshScheduled = false;
+    let pendingTooltipIds = null;
+    let pendingFullRefresh = false;
+    function scheduleRefresh(affectedTooltipIds) {
+        if (affectedTooltipIds) {
+            if (!pendingTooltipIds) {
+                pendingTooltipIds = new Set();
+            }
+            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();
+            }
+            else if (ids && ids.size > 0) {
+                refreshEntriesForTooltipIds(ids);
+            }
+        };
+        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);
+            }
+        });
+    }
+    /**
+     * 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(() => {
-            refreshAllEntries();
+        documentObserver = new MutationObserver((records) => {
+            const affectedIds = collectAffectedTooltipIds(records);
+            scheduleRefresh(affectedIds);
         });
         documentObserver.observe(document.body, {
             childList: true,
@@ -359,6 +459,7 @@
                 anchors: initialState.anchors,
                 error: initialState.error,
                 subscribers: new Set(),
+                tooltipId: extractTooltipId(selector),
             };
             registry.set(selector, entry);
         }
@@ -386,7 +487,7 @@
         }
         return selector;
     };
-    const useTooltipAnchors = ({ id, anchorSelect, imperativeAnchorSelect, activeAnchor, disableTooltip, onActiveAnchorRemoved, }) => {
+    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);
@@ -402,9 +503,10 @@
             catch (_a) {
                 return false;
             }
-        }, [activeAnchor, selector]);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [activeAnchor, selector, anchorElements]);
         React.useEffect(() => {
-            if (!selector) {
+            if (!selector || !trackAnchors) {
                 setRawAnchorElements([]);
                 setSelectorError(null);
                 return undefined;
@@ -413,7 +515,7 @@
                 setRawAnchorElements(anchors);
                 setSelectorError(error);
             });
-        }, [selector]);
+        }, [selector, trackAnchors]);
         React.useEffect(() => {
             if (!selectorError || warnedSelectorRef.current === selector) {
                 return;
@@ -433,111 +535,81 @@
                 onActiveAnchorRemoved();
             }
         }, [activeAnchor, anchorElements, activeAnchorMatchesSelector, onActiveAnchorRemoved]);
-        return anchorElements;
+        return {
+            anchorElements,
+            selector,
+        };
     };
 
-    const useTooltipEvents = ({ activeAnchor, anchorElements, clickable, closeEvents, delayHide, delayShow, disableTooltip, float, globalCloseEvents, handleHideTooltipDelayed, handleShow, handleShowTooltipDelayed, handleTooltipPosition, hoveringTooltip, imperativeModeOnly, lastFloatPosition, openEvents, openOnClick, setActiveAnchor, show, tooltipHideDelayTimerRef, tooltipRef, tooltipShowDelayTimerRef, updateTooltipPosition, }) => {
-        React.useEffect(() => {
-            const resolveAnchorElement = (target) => {
-                var _a;
-                const targetElement = target;
-                if (!(targetElement === null || targetElement === void 0 ? void 0 : targetElement.isConnected)) {
-                    return null;
-                }
-                return ((_a = anchorElements.find((anchor) => anchor === targetElement || anchor.contains(targetElement))) !== null && _a !== void 0 ? _a : null);
-            };
-            const handlePointerMove = (event) => {
-                if (!event) {
-                    return;
-                }
-                if (!activeAnchor) {
-                    return;
-                }
-                const targetAnchor = resolveAnchorElement(event.target);
-                if (targetAnchor !== activeAnchor) {
-                    return;
-                }
-                const mouseEvent = event;
-                const mousePosition = {
-                    x: mouseEvent.clientX,
-                    y: mouseEvent.clientY,
-                };
-                handleTooltipPosition(mousePosition);
-                // eslint-disable-next-line no-param-reassign
-                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 (activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.contains(target)) {
-                    return;
-                }
-                if (anchorElements.some((anchor) => anchor === null || anchor === void 0 ? void 0 : anchor.contains(target))) {
-                    return;
-                }
-                handleShow(false);
-                clearTimeoutRef(tooltipShowDelayTimerRef);
-            };
-            const handleShowTooltip = (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);
-                }
-                setActiveAnchor(anchor);
-                if (tooltipHideDelayTimerRef.current) {
-                    clearTimeout(tooltipHideDelayTimerRef.current);
-                }
-            };
-            const handleHideTooltip = () => {
-                if (clickable) {
-                    handleHideTooltipDelayed(delayHide || 100);
-                }
-                else if (delayHide) {
-                    handleHideTooltipDelayed();
-                }
-                else {
-                    handleShow(false);
-                }
-                if (tooltipShowDelayTimerRef.current) {
-                    clearTimeout(tooltipShowDelayTimerRef.current);
-                }
-            };
-            const internalDebouncedHandleShowTooltip = debounce(handleShowTooltip, 50);
-            const internalDebouncedHandleHideTooltip = debounce(handleHideTooltip, 50);
-            const debouncedHandleShowTooltip = (anchor) => {
-                internalDebouncedHandleHideTooltip.cancel();
-                internalDebouncedHandleShowTooltip(anchor);
-            };
-            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
+    /**
+     * 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,
@@ -547,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,
@@ -563,12 +647,24 @@
                     mouseup: false,
                 };
             if (!closeEvents && openOnClick) {
-                Object.assign(actualCloseEvents, {
+                Object.assign(events, {
                     mouseleave: false,
                     blur: false,
                 });
             }
-            const actualGlobalCloseEvents = globalCloseEvents
+            if (imperativeModeOnly) {
+                Object.assign(events, {
+                    mouseleave: false,
+                    blur: false,
+                    click: false,
+                    dblclick: false,
+                    mouseup: false,
+                });
+            }
+            return events;
+        }, [closeEvents, openOnClick, imperativeModeOnly]);
+        const actualGlobalCloseEvents = React.useMemo(() => {
+            const events = globalCloseEvents
                 ? { ...globalCloseEvents }
                 : {
                     escape: false,
@@ -577,108 +673,157 @@
                     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,
                 });
             }
-            const tooltipElement = tooltipRef.current;
-            const tooltipScrollParent = getScrollParent(tooltipRef.current);
-            const anchorScrollParent = getScrollParent(activeAnchor);
-            if (actualGlobalCloseEvents.scroll) {
-                window.addEventListener('scroll', handleScrollResize);
-                anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.addEventListener('scroll', handleScrollResize);
-                tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.addEventListener('scroll', handleScrollResize);
+            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;
             }
-            let updateTooltipCleanup = null;
-            if (actualGlobalCloseEvents.resize) {
-                window.addEventListener('resize', handleScrollResize);
+            if (dataTooltipId) {
+                const matchedAnchor = resolveDataTooltipAnchor(targetElement, dataTooltipId);
+                if (matchedAnchor && !(disableTooltip === null || disableTooltip === void 0 ? void 0 : disableTooltip(matchedAnchor))) {
+                    return matchedAnchor;
+                }
             }
-            else if (activeAnchor && tooltipRef.current) {
-                updateTooltipCleanup = dom.autoUpdate(activeAnchor, tooltipRef.current, updateTooltipPosition, {
-                    ancestorResize: true,
-                    elementResize: true,
-                    layoutShift: true,
-                });
+            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;
+                }
             }
-            const handleEsc = (event) => {
-                if (event.key !== 'Escape') {
-                    return;
+            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 (actualGlobalCloseEvents.escape) {
-                window.addEventListener('keydown', handleEsc);
             }
-            if (actualGlobalCloseEvents.clickOutsideAnchor) {
-                window.addEventListener('click', handleClickOutsideAnchors);
+            if (tooltipShowDelayTimerRef.current) {
+                clearTimeout(tooltipShowDelayTimerRef.current);
             }
-            const activeAnchorContainsTarget = (event) => Boolean((event === null || event === void 0 ? void 0 : event.target) && (activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.contains(event.target)));
-            const handleClickOpenTooltipAnchor = (event) => {
-                var _a;
-                const anchor = resolveAnchorElement((_a = event === null || event === void 0 ? void 0 : event.target) !== null && _a !== void 0 ? _a : null);
-                if (!anchor) {
-                    return;
-                }
-                if (show && activeAnchor === anchor) {
-                    return;
-                }
-                handleShowTooltip(anchor);
+        };
+        // 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 handleClickCloseTooltipAnchor = (event) => {
-                if (!show || !activeAnchorContainsTarget(event)) {
-                    return;
-                }
-                handleHideTooltip();
+            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 regularEvents = ['mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'focus', 'blur'];
-            const clickEvents = ['click', 'dblclick', 'mousedown', 'mouseup'];
-            const delegatedEvents = [];
             const addDelegatedHoverOpenListener = () => {
-                delegatedEvents.push({
-                    event: 'mouseover',
-                    listener: (event) => {
-                        const anchor = resolveAnchorElement(event.target);
-                        if (!anchor) {
-                            return;
-                        }
-                        const relatedAnchor = resolveAnchorElement(event.relatedTarget);
-                        if (relatedAnchor === anchor) {
-                            return;
-                        }
-                        debouncedHandleShowTooltip(anchor);
-                    },
+                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 = () => {
-                delegatedEvents.push({
-                    event: 'mouseout',
-                    listener: (event) => {
-                        if (!activeAnchorContainsTarget(event)) {
-                            return;
-                        }
-                        const relatedTarget = event.relatedTarget;
-                        if (activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.contains(relatedTarget)) {
-                            return;
-                        }
-                        debouncedHandleHideTooltip();
-                    },
+                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) {
@@ -694,37 +839,48 @@
                 addDelegatedHoverCloseListener();
             }
             if (actualOpenEvents.focus) {
-                delegatedEvents.push({
-                    event: 'focusin',
-                    listener: (event) => {
-                        debouncedHandleShowTooltip(resolveAnchorElement(event.target));
-                    },
+                addDelegatedListener('focusin', (event) => {
+                    debouncedHandleShowTooltip(resolveAnchorElementRef.current(event.target));
                 });
             }
             if (actualCloseEvents.blur) {
-                delegatedEvents.push({
-                    event: 'focusout',
-                    listener: (event) => {
-                        if (!activeAnchorContainsTarget(event)) {
-                            return;
-                        }
-                        const relatedTarget = event.relatedTarget;
-                        if (activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.contains(relatedTarget)) {
-                            return;
-                        }
-                        debouncedHandleHideTooltip();
-                    },
+                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)) {
-                    delegatedEvents.push({
-                        event,
-                        listener: handleClickOpenTooltipAnchor,
-                    });
+                    addDelegatedListener(event, handleClickOpenTooltipAnchor);
                 }
             });
             Object.entries(actualCloseEvents).forEach(([event, enabled]) => {
@@ -732,38 +888,111 @@
                     return;
                 }
                 if (clickEvents.includes(event)) {
-                    delegatedEvents.push({
-                        event,
-                        listener: handleClickCloseTooltipAnchor,
-                    });
+                    addDelegatedListener(event, handleClickCloseTooltipAnchor);
                 }
             });
             if (float) {
-                delegatedEvents.push({
-                    event: 'pointermove',
-                    listener: handlePointerMove,
+                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 handleMouseOverTooltip = () => {
-                // eslint-disable-next-line no-param-reassign
                 hoveringTooltip.current = true;
             };
             const handleMouseOutTooltip = () => {
-                // eslint-disable-next-line no-param-reassign
                 hoveringTooltip.current = false;
-                handleHideTooltip();
+                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);
             }
-            delegatedEvents.forEach(({ event, listener }) => {
-                document.addEventListener(event, listener);
-            });
             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);
+                tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.addEventListener('scroll', handleScrollResize);
+            }
+            let updateTooltipCleanup = null;
+            if (actualGlobalCloseEvents.resize) {
+                window.addEventListener('resize', handleScrollResize);
+            }
+            else if (activeAnchor && tooltipRef.current) {
+                updateTooltipCleanup = dom.autoUpdate(activeAnchor, tooltipRef.current, () => updateTooltipPositionRef.current(), {
+                    ancestorResize: true,
+                    elementResize: true,
+                    layoutShift: true,
+                });
+            }
+            const handleEsc = (event) => {
+                if (event.key !== 'Escape') {
+                    return;
+                }
+                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);
-                clearTimeoutRef(tooltipHideDelayTimerRef);
+            };
+            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);
@@ -775,50 +1004,19 @@
                 if (updateTooltipCleanup) {
                     updateTooltipCleanup();
                 }
-                if (actualGlobalCloseEvents.clickOutsideAnchor) {
-                    window.removeEventListener('click', handleClickOutsideAnchors);
-                }
                 if (actualGlobalCloseEvents.escape) {
                     window.removeEventListener('keydown', handleEsc);
                 }
-                if (addHoveringTooltipListeners) {
-                    tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseover', handleMouseOverTooltip);
-                    tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseout', handleMouseOutTooltip);
+                if (actualGlobalCloseEvents.clickOutsideAnchor) {
+                    window.removeEventListener('click', handleClickOutsideAnchors);
                 }
-                delegatedEvents.forEach(({ event, listener }) => {
-                    document.removeEventListener(event, listener);
-                });
-                internalDebouncedHandleShowTooltip.cancel();
-                internalDebouncedHandleHideTooltip.cancel();
             };
-        }, [
-            activeAnchor,
-            anchorElements,
-            clickable,
-            closeEvents,
-            delayHide,
-            delayShow,
-            disableTooltip,
-            float,
-            globalCloseEvents,
-            handleHideTooltipDelayed,
-            handleShow,
-            handleShowTooltipDelayed,
-            handleTooltipPosition,
-            imperativeModeOnly,
-            lastFloatPosition,
-            openEvents,
-            openOnClick,
-            setActiveAnchor,
-            show,
-            tooltipHideDelayTimerRef,
-            tooltipRef,
-            tooltipShowDelayTimerRef,
-            updateTooltipPosition,
-            hoveringTooltip,
-        ]);
+            // 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, 
@@ -843,6 +1041,18 @@
         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
@@ -903,7 +1113,6 @@
             else {
                 removeAriaDescribedBy(activeAnchor);
             }
-            // eslint-disable-next-line consistent-return
             return () => {
                 // cleanup aria-describedby when the tooltip is closed
                 removeAriaDescribedBy(activeAnchor);
@@ -941,8 +1150,11 @@
                 /**
                  * see `onTransitionEnd` on tooltip wrapper
                  */
-                const style = getComputedStyle(document.body);
-                const transitionShowDelay = cssTimeToMs(style.getPropertyValue('--rt-transition-show-delay'));
+                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
@@ -973,9 +1185,26 @@
             if (!mounted.current) {
                 return;
             }
-            setComputedPosition((oldComputedPosition) => deepEqual(oldComputedPosition, newComputedPosition)
-                ? oldComputedPosition
-                : newComputedPosition);
+            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) {
@@ -1003,24 +1232,20 @@
         }, [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,
-                    };
-                },
-            };
+            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: virtualElement,
+                elementReference: virtualElementRef.current,
                 tooltipReference: tooltipRef.current,
                 tooltipArrowReference: tooltipArrowRef.current,
                 strategy: positionStrategy,
@@ -1105,17 +1330,24 @@
             clearTimeoutRef(tooltipHideDelayTimerRef);
             clearTimeoutRef(tooltipAutoCloseTimerRef);
         }, [handleShow, setActiveAnchor]);
-        const anchorElements = useTooltipAnchors({
+        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,
@@ -1139,11 +1371,16 @@
             tooltipShowDelayTimerRef,
             updateTooltipPosition,
         });
+        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;
@@ -1154,7 +1391,7 @@
                 }
                 timeoutId = setTimeout(() => {
                     if (mounted.current) {
-                        updateTooltipPosition();
+                        updateTooltipPositionRef.current();
                     }
                     timeoutId = null;
                 }, 0);
@@ -1166,9 +1403,13 @@
                     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;
@@ -1191,7 +1432,15 @@
                 }
                 setActiveAnchor((_a = anchorElements[0]) !== null && _a !== void 0 ? _a : null);
             }
-        }, [anchorElements, activeAnchor, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect, setActiveAnchor]);
+        }, [
+            activeAnchor,
+            anchorElements,
+            defaultIsOpen,
+            imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect,
+            isOpen,
+            rendered,
+            setActiveAnchor,
+        ]);
         React.useEffect(() => {
             if (defaultIsOpen) {
                 handleShow(true);
@@ -1215,7 +1464,20 @@
         }, [delayShow, handleShowTooltipDelayed]);
         const actualContent = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.content) !== null && _a !== void 0 ? _a : content;
         const hasContent = actualContent !== null && actualContent !== undefined;
-        const canShow = show && Object.keys(computedPosition.tooltipStyles).length > 0;
+        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;
@@ -1270,19 +1532,9 @@
                 setRendered(false);
                 setImperativeOptions(null);
                 afterHide === null || afterHide === void 0 ? void 0 : afterHide();
-            }, style: {
-                ...externalStyles,
-                ...computedPosition.tooltipStyles,
-                opacity: opacity !== undefined && canShow ? opacity : undefined,
-            }, ref: tooltipRef },
+            }, 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: {
-                    ...computedPosition.tooltipArrowStyles,
-                    background: arrowColor
-                        ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
-                        : undefined,
-                    '--rt-arrow-size': `${arrowSize}px`,
-                }, ref: tooltipArrowRef }))) : null;
+            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;
         }
@@ -1293,12 +1545,82 @@
     };
     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', 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) => {
@@ -1330,37 +1652,24 @@
             // 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;
-                    }
-                    // make sure to get all set attributes, since all unset attributes are reset
-                    const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor);
-                    setAnchorDataAttributes(dataAttributes);
-                });
-            };
-            // 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);
-                setAnchorDataAttributes(dataAttributes);
-                // Start observing the target node for configured mutations
-                observer.observe(activeAnchor, observerConfig);
-            }
-            else {
+            if (!activeAnchor) {
                 setAnchorDataAttributes({});
+                return () => { };
             }
-            return () => {
-                // Remove the observer when the tooltip is destroyed
-                observer.disconnect();
+            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;
+                    }
+                    return attrs;
+                });
             };
+            updateAttributes(activeAnchor);
+            const unsubscribe = observeAnchorAttributes(activeAnchor, updateAttributes);
+            return unsubscribe;
         }, [activeAnchor, anchorSelect]);
         React.useEffect(() => {
             /* c8 ignore start */
@@ -1441,19 +1750,12 @@
             disableTooltip,
             activeAnchor,
             previousActiveAnchor: previousActiveAnchorRef.current,
-            setActiveAnchor: (anchor) => {
-                setActiveAnchor((prev) => {
-                    if (!(anchor === null || anchor === void 0 ? void 0 : anchor.isSameNode(prev))) {
-                        previousActiveAnchorRef.current = prev;
-                    }
-                    return anchor;
-                });
-            },
+            setActiveAnchor: handleSetActiveAnchor,
             role,
         };
         return React.createElement(Tooltip$1, { ...props });
     });
-    var TooltipController$1 = React.memo(TooltipController);
+    var TooltipController_default = React.memo(TooltipController);
 
     // those content will be replaced in build time with the `react-tooltip.css` builded content
     const TooltipCoreStyles = `:root {
@@ -1475,7 +1777,6 @@
   left: 0;
   pointer-events: none;
   opacity: 0;
-  will-change: opacity;
 }
 
 .core-styles-module_fixed__pcSol {
@@ -1506,11 +1807,13 @@
 .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;
 }
 
 `;
@@ -1591,7 +1894,7 @@
         }));
     }
 
-    exports.Tooltip = TooltipController$1;
+    exports.Tooltip = TooltipController_default;
 
 }));
 //# sourceMappingURL=react-tooltip.umd.js.map