react-tooltip 6.0.0-beta.1179.rc.17 → 6.0.0-beta.1179.rc.19

package/dist/react-tooltip.cjs

@@ -84,13 +84,10 @@ function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', re
     }
 }
 
-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
         // console.error('The reference element for tooltip was not defined: ', elementReference)
@@ -177,6 +174,7 @@ const cssTimeToMs = (time) => {
  */
 const debounce = (func, wait, immediate) => {
     let timeout = null;
+    let currentFunc = func;
     const debounced = function debounced(...args) {
         const later = () => {
             timeout = null;
@@ -186,7 +184,7 @@ const debounce = (func, wait, immediate) => {
              * there's no need to clear the timeout
              * since we expect it to resolve and set `timeout = null`
              */
-            func.apply(this, args);
+            currentFunc.apply(this, args);
             timeout = setTimeout(later, wait);
         }
     };
@@ -199,36 +197,12 @@ const debounce = (func, wait, immediate) => {
         clearTimeout(timeout);
         timeout = null;
     };
+    debounced.setCallback = (newFunc) => {
+        currentFunc = newFunc;
+    };
     return debounced;
 };
 
-const isObject = (object) => {
-    return object !== null && !Array.isArray(object) && typeof object === 'object';
-};
-const deepEqual = (object1, object2) => {
-    if (object1 === object2) {
-        return true;
-    }
-    if (Array.isArray(object1) && Array.isArray(object2)) {
-        if (object1.length !== object2.length) {
-            return false;
-        }
-        return object1.every((val, index) => deepEqual(val, object2[index]));
-    }
-    if (Array.isArray(object1) !== Array.isArray(object2)) {
-        return false;
-    }
-    if (!isObject(object1) || !isObject(object2)) {
-        return object1 === object2;
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    return keys1.every((key) => deepEqual(object1[key], object2[key]));
-};
-
 const isScrollable = (node) => {
     if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
         return false;
@@ -298,6 +272,14 @@ var styles = {"tooltip":"styles-module_tooltip__mnnfp","content":"styles-module_
 
 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;
@@ -319,8 +301,7 @@ function readAnchorsForSelector(selector) {
     }
 }
 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;
@@ -344,12 +325,117 @@ function refreshAllEntries() {
         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,
@@ -374,6 +460,7 @@ function subscribeAnchorSelector(selector, subscriber) {
             anchors: initialState.anchors,
             error: initialState.error,
             subscribers: new Set(),
+            tooltipId: extractTooltipId(selector),
         };
         registry.set(selector, entry);
     }
@@ -455,141 +542,75 @@ const useTooltipAnchors = ({ id, anchorSelect, imperativeAnchorSelect, activeAnc
     };
 };
 
+/**
+ * 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, }) => {
-    React.useEffect(() => {
-        const dataTooltipId = anchorSelector ? parseDataTooltipIdSelector(anchorSelector) : null;
-        const resolveAnchorElement = (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 = anchorElements.find((anchor) => anchor === targetElement || anchor.contains(targetElement))) !== null && _b !== void 0 ? _b : 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);
-            lastFloatPosition.current = mousePosition;
-        };
-        const handleClickOutsideAnchors = (event) => {
-            var _a;
-            if (!show) {
-                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 (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);
-            }
-            if (delayShow && activeAnchor && anchor !== activeAnchor) {
-                // 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);
-            }
-        };
-        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
+    // 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,
@@ -599,13 +620,25 @@ const useTooltipEvents = ({ activeAnchor, anchorElements, anchorSelector, clicka
                 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,
@@ -615,12 +648,24 @@ const useTooltipEvents = ({ activeAnchor, anchorElements, anchorSelector, clicka
                 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,
@@ -629,108 +674,157 @@ const useTooltipEvents = ({ activeAnchor, anchorElements, anchorSelector, clicka
                 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;
+        }
+        if (dataTooltipId) {
+            const matchedAnchor = resolveDataTooltipAnchor(targetElement, dataTooltipId);
+            if (matchedAnchor && !(disableTooltip === null || disableTooltip === void 0 ? void 0 : disableTooltip(matchedAnchor))) {
+                return matchedAnchor;
+            }
         }
-        let updateTooltipCleanup = null;
-        if (actualGlobalCloseEvents.resize) {
-            window.addEventListener('resize', handleScrollResize);
+        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;
+            }
         }
-        else if (activeAnchor && tooltipRef.current) {
-            updateTooltipCleanup = dom.autoUpdate(activeAnchor, tooltipRef.current, updateTooltipPosition, {
-                ancestorResize: true,
-                elementResize: true,
-                layoutShift: true,
-            });
+        return ((_b = anchorElementsRef.current.find((anchor) => anchor === targetElement || anchor.contains(targetElement))) !== null && _b !== void 0 ? _b : null);
+    };
+    handleShowTooltipRef.current = (anchor) => {
+        if (!anchor) {
+            return;
         }
-        const handleEsc = (event) => {
-            if (event.key !== 'Escape') {
-                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) {
@@ -746,37 +840,48 @@ const useTooltipEvents = ({ activeAnchor, anchorElements, anchorSelector, clicka
             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]) => {
@@ -784,33 +889,110 @@ const useTooltipEvents = ({ activeAnchor, anchorElements, anchorSelector, clicka
                 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 = () => {
             hoveringTooltip.current = true;
         };
         const handleMouseOutTooltip = () => {
             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);
+        };
+        if (actualGlobalCloseEvents.clickOutsideAnchor) {
+            window.addEventListener('click', handleClickOutsideAnchors);
+        }
         return () => {
             if (actualGlobalCloseEvents.scroll) {
                 window.removeEventListener('scroll', handleScrollResize);
@@ -823,51 +1005,19 @@ const useTooltipEvents = ({ activeAnchor, anchorElements, anchorSelector, clicka
             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,
-        anchorSelector,
-        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, 
@@ -892,6 +1042,18 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
     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
@@ -989,8 +1151,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
             /**
              * 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
@@ -1021,9 +1186,26 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
         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) {
@@ -1051,24 +1233,20 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
     }, [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,
@@ -1194,6 +1372,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
         tooltipShowDelayTimerRef,
         updateTooltipPosition,
     });
+    const updateTooltipPositionRef = React.useRef(updateTooltipPosition);
+    updateTooltipPositionRef.current = updateTooltipPosition;
     React.useEffect(() => {
         if (!rendered) {
             return;
@@ -1212,7 +1392,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
             }
             timeoutId = setTimeout(() => {
                 if (mounted.current) {
-                    updateTooltipPosition();
+                    updateTooltipPositionRef.current();
                 }
                 timeoutId = null;
             }, 0);
@@ -1224,7 +1404,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
                 clearTimeout(timeoutId);
             }
         };
-    }, [content, contentWrapperRef, rendered, updateTooltipPosition]);
+    }, [content, contentWrapperRef, rendered]);
     React.useEffect(() => {
         var _a;
         const shouldResolveInitialActiveAnchor = rendered || defaultIsOpen || Boolean(isOpen);
@@ -1285,7 +1465,20 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
     }, [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;
@@ -1340,19 +1533,9 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
             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;
     }
@@ -1363,12 +1546,82 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
 };
 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) => {
@@ -1400,37 +1653,24 @@ const TooltipController = React.forwardRef(({ id, anchorSelect, content, render,
         // 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);
-                setAnchorDataAttributes(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);
-            setAnchorDataAttributes(dataAttributes);
-            // Start observing the target node for configured mutations
-            observer.observe(activeAnchor, observerConfig);
-        }
-        else {
-            setAnchorDataAttributes({});
-        }
-        return () => {
-            // Remove the observer when the tooltip is destroyed
-            observer.disconnect();
-        };
+        updateAttributes(activeAnchor);
+        const unsubscribe = observeAnchorAttributes(activeAnchor, updateAttributes);
+        return unsubscribe;
     }, [activeAnchor, anchorSelect]);
     React.useEffect(() => {
         /* c8 ignore start */
@@ -1511,14 +1751,7 @@ const TooltipController = React.forwardRef(({ id, anchorSelect, content, render,
         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 });
@@ -1545,7 +1778,6 @@ const TooltipCoreStyles = `:root {
   left: 0;
   pointer-events: none;
   opacity: 0;
-  will-change: opacity;
 }
 
 .core-styles-module_fixed__pcSol {
@@ -1576,11 +1808,13 @@ const TooltipCoreStyles = `:root {
 .core-styles-module_show__Nt9eE {
   opacity: var(--rt-opacity);
   transition: opacity var(--rt-transition-show-delay) ease-out;
+  will-change: opacity;
 }
 
 .core-styles-module_closing__sGnxF {
   opacity: 0;
   transition: opacity var(--rt-transition-closing-delay) ease-in;
+  will-change: opacity;
 }
 
 `;