@ssaprt/tooltip 1.0.0 → 1.0.3

package/dist/index.mjs

@@ -354,7 +354,7 @@ var presets = {
     animation: animations.bounce
   }),
   hologram: createTheme({
-    background: "linear-gradient(115deg, rgba(34, 211, 238, 0.42), rgba(168, 85, 247, 0.35), rgba(236, 72, 153, 0.35), rgba(34, 211, 238, 0.42)), rgba(8, 47, 73, 0.72)",
+    background: "linear-gradient(115deg, rgba(34, 211, 238, 0.42), rgba(168, 85, 247, 0.35), rgba(236, 72, 153, 0.35), rgba(34, 211, 238, 0.42)), linear-gradient(135deg, #082f49, #312e81)",
     color: "#ecfeff",
     fontFamily: "Segoe UI, Arial, sans-serif",
     fontSize: "12px",
@@ -364,25 +364,23 @@ var presets = {
     filter: "drop-shadow(0 0 7px rgba(34, 211, 238, 0.75)) drop-shadow(0 0 16px rgba(168, 85, 247, 0.4))",
     padding: "9px 15px",
     letterSpacing: "0.06em",
-    backdropFilter: "blur(8px)",
     arrowSize: "8px",
     arrowWidth: "18px",
     animation: animations.blur
   }),
   glass: createTheme({
-    background: "linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)), rgba(15, 23, 42, 0.68)",
+    background: "linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)), linear-gradient(135deg, #1e293b, #0f172a)",
     color: "#f8fafc",
     border: "1px solid rgba(255, 255, 255, 0.34)",
     borderRadius: "16px",
     filter: "drop-shadow(0 12px 20px rgba(15, 23, 42, 0.38))",
     padding: "9px 15px",
-    backdropFilter: "blur(16px)",
     arrowSize: "8px",
     arrowWidth: "18px",
     animation: animations.blur
   }),
   frost: createTheme({
-    background: "radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.85), transparent 35%), linear-gradient(135deg, rgba(224, 242, 254, 0.92), rgba(186, 230, 253, 0.72))",
+    background: "radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.85), transparent 35%), linear-gradient(135deg, #e0f2fe, #bae6fd)",
     color: "#075985",
     fontWeight: 600,
     border: "1px solid rgba(125, 211, 252, 0.9)",
@@ -390,7 +388,6 @@ var presets = {
     filter: "drop-shadow(0 8px 15px rgba(14, 116, 144, 0.24))",
     padding: "9px 15px",
     textShadow: "0 1px 0 rgba(255, 255, 255, 0.8)",
-    backdropFilter: "blur(14px)",
     arrowSize: "8px",
     arrowWidth: "19px",
     animation: animations.blur
@@ -755,7 +752,6 @@ var presets = {
     borderRadius: "20px 8px 20px 8px",
     filter: "drop-shadow(0 10px 17px rgba(49, 46, 129, 0.48))",
     padding: "10px 16px",
-    backdropFilter: "blur(8px)",
     arrowSize: "9px",
     arrowWidth: "21px",
     animation: animations.blur
@@ -948,6 +944,13 @@ var VIEWPORT_PADDING = 8;
 var DEFAULT_ARROW_SIZE = 6;
 var DEFAULT_TOOLTIP_GAP = 10;
 var ARROW_EDGE_OFFSET = 10;
+var INTERACTIVE_DIRECT_PADDING = 4;
+var INTERACTIVE_BRIDGE_PADDING = 8;
+var INTERACTIVE_BRIDGE_TIMEOUT = 700;
+var INTERACTIVE_RECHECK_INTERVAL = 50;
+var TOUCH_MOVE_THRESHOLD = 10;
+var TOUCH_MAX_TAP_DURATION = 600;
+var TOUCH_FOCUS_SUPPRESSION = 700;
 var oppositePlacement = {
   top: "bottom",
   bottom: "top",
@@ -958,6 +961,112 @@ var clamp = (value, min, max) => {
   const resolvedMax = Math.max(min, max);
   return Math.min(Math.max(value, min), resolvedMax);
 };
+var isPointInsideRect = (point, rect, padding = 0) => {
+  return point.x >= rect.left - padding && point.x <= rect.right + padding && point.y >= rect.top - padding && point.y <= rect.bottom + padding;
+};
+var isPointOnSegment = (point, start, end) => {
+  const cross = (point.y - start.y) * (end.x - start.x) - (point.x - start.x) * (end.y - start.y);
+  if (Math.abs(cross) > 1e-3) {
+    return false;
+  }
+  return point.x >= Math.min(start.x, end.x) && point.x <= Math.max(start.x, end.x) && point.y >= Math.min(start.y, end.y) && point.y <= Math.max(start.y, end.y);
+};
+var isPointInsidePolygon = (point, polygon) => {
+  let inside = false;
+  for (let currentIndex = 0, previousIndex = polygon.length - 1; currentIndex < polygon.length; previousIndex = currentIndex, currentIndex += 1) {
+    const current = polygon[currentIndex];
+    const previous = polygon[previousIndex];
+    if (isPointOnSegment(point, previous, current)) {
+      return true;
+    }
+    const crosses = current.y > point.y !== previous.y > point.y && point.x < (previous.x - current.x) * (point.y - current.y) / (previous.y - current.y) + current.x;
+    if (crosses) {
+      inside = !inside;
+    }
+  }
+  return inside;
+};
+var createInteractiveBridge = (anchorRect, tooltipRect, placement) => {
+  const padding = INTERACTIVE_BRIDGE_PADDING;
+  if (placement === "top") {
+    return [
+      {
+        x: tooltipRect.left - padding,
+        y: tooltipRect.bottom - padding
+      },
+      {
+        x: tooltipRect.right + padding,
+        y: tooltipRect.bottom - padding
+      },
+      {
+        x: anchorRect.right + padding,
+        y: anchorRect.top + padding
+      },
+      {
+        x: anchorRect.left - padding,
+        y: anchorRect.top + padding
+      }
+    ];
+  }
+  if (placement === "bottom") {
+    return [
+      {
+        x: anchorRect.left - padding,
+        y: anchorRect.bottom - padding
+      },
+      {
+        x: anchorRect.right + padding,
+        y: anchorRect.bottom - padding
+      },
+      {
+        x: tooltipRect.right + padding,
+        y: tooltipRect.top + padding
+      },
+      {
+        x: tooltipRect.left - padding,
+        y: tooltipRect.top + padding
+      }
+    ];
+  }
+  if (placement === "left") {
+    return [
+      {
+        x: tooltipRect.right - padding,
+        y: tooltipRect.top - padding
+      },
+      {
+        x: anchorRect.left + padding,
+        y: anchorRect.top - padding
+      },
+      {
+        x: anchorRect.left + padding,
+        y: anchorRect.bottom + padding
+      },
+      {
+        x: tooltipRect.right - padding,
+        y: tooltipRect.bottom + padding
+      }
+    ];
+  }
+  return [
+    {
+      x: anchorRect.right - padding,
+      y: anchorRect.top - padding
+    },
+    {
+      x: tooltipRect.left + padding,
+      y: tooltipRect.top - padding
+    },
+    {
+      x: tooltipRect.left + padding,
+      y: tooltipRect.bottom + padding
+    },
+    {
+      x: anchorRect.right - padding,
+      y: anchorRect.bottom + padding
+    }
+  ];
+};
 var useTooltip = ({
   anchor,
   preferredPlacement,
@@ -970,8 +1079,17 @@ var useTooltip = ({
   const hideTimerRef = useRef(null);
   const firstFrameRef = useRef(null);
   const secondFrameRef = useRef(null);
+  const interactiveFrameRef = useRef(null);
   const phaseRef = useRef("hidden");
   const pendingHideRef = useRef(false);
+  const interactiveBridgeDeadlineRef = useRef(0);
+  const pointerRef = useRef({
+    x: Number.NaN,
+    y: Number.NaN,
+    pointerType: ""
+  });
+  const touchGestureRef = useRef(null);
+  const suppressFocusUntilRef = useRef(0);
   const [mounted, setMounted] = useState(false);
   const [phase, setPhase] = useState("hidden");
   const [placement, setPlacement] = useState(preferredPlacement);
@@ -1003,6 +1121,13 @@ var useTooltip = ({
       secondFrameRef.current = null;
     }
   }, []);
+  const clearInteractiveFrame = useCallback(() => {
+    if (interactiveFrameRef.current === null) {
+      return;
+    }
+    window.cancelAnimationFrame(interactiveFrameRef.current);
+    interactiveFrameRef.current = null;
+  }, []);
   const getAvailableSpace = useCallback(
     (currentPlacement, rect) => {
       switch (currentPlacement) {
@@ -1042,10 +1167,7 @@ var useTooltip = ({
       }
       return bodyWidth + distance;
     };
-    const preferredAvailable = getAvailableSpace(
-      preferredPlacement,
-      rect
-    );
+    const preferredAvailable = getAvailableSpace(preferredPlacement, rect);
     const preferredRequired = getRequiredSpace(preferredPlacement);
     let nextPlacement = preferredPlacement;
     if (preferredAvailable < preferredRequired) {
@@ -1103,12 +1225,61 @@ var useTooltip = ({
       "--tooltip-arrow-offset": arrowOffset
     });
   }, [anchor, getAvailableSpace, preferredPlacement]);
+  const isFocusInsideTooltipRegion = useCallback(() => {
+    if (!anchor || typeof document === "undefined") {
+      return false;
+    }
+    const activeElement = document.activeElement;
+    const tooltip = tooltipRef.current;
+    if (!(activeElement instanceof Node)) {
+      return false;
+    }
+    if (interactive && tooltip?.contains(activeElement)) {
+      return true;
+    }
+    return anchor.contains(activeElement) && activeElement instanceof Element && activeElement.matches(":focus-visible");
+  }, [anchor, interactive]);
+  const getInteractivePointerArea = useCallback(() => {
+    if (!interactive || !anchor) {
+      return "outside";
+    }
+    const pointer = pointerRef.current;
+    const tooltip = tooltipRef.current;
+    if (!tooltip || pointer.pointerType !== "mouse" && pointer.pointerType !== "pen" || !Number.isFinite(pointer.x) || !Number.isFinite(pointer.y)) {
+      return "outside";
+    }
+    const point = {
+      x: pointer.x,
+      y: pointer.y
+    };
+    const anchorRect = anchor.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    if (isPointInsideRect(
+      point,
+      anchorRect,
+      INTERACTIVE_DIRECT_PADDING
+    ) || isPointInsideRect(
+      point,
+      tooltipRect,
+      INTERACTIVE_DIRECT_PADDING
+    )) {
+      return "direct";
+    }
+    const bridge = createInteractiveBridge(
+      anchorRect,
+      tooltipRect,
+      placement
+    );
+    return isPointInsidePolygon(point, bridge) ? "bridge" : "outside";
+  }, [anchor, interactive, placement]);
   const removeTooltip = useCallback(() => {
     clearHideTimer();
     clearEnterFrames();
+    clearInteractiveFrame();
     pendingHideRef.current = false;
+    interactiveBridgeDeadlineRef.current = 0;
     updatePhase("hidden");
-  }, [clearEnterFrames, clearHideTimer, updatePhase]);
+  }, [clearEnterFrames, clearHideTimer, clearInteractiveFrame, updatePhase]);
   const runHide = useCallback(() => {
     const currentPhase = phaseRef.current;
     if (currentPhase === "hidden" || currentPhase === "leaving") {
@@ -1126,17 +1297,61 @@ var useTooltip = ({
   }, [removeTooltip, updatePhase]);
   const hideTooltip = useCallback(
     (immediate = false) => {
-      clearHideTimer();
       if (immediate) {
+        clearHideTimer();
+        interactiveBridgeDeadlineRef.current = 0;
         runHide();
         return;
       }
-      hideTimerRef.current = window.setTimeout(() => {
+      if (hideTimerRef.current !== null) {
+        return;
+      }
+      const attemptHide = () => {
         hideTimerRef.current = null;
+        if (isFocusInsideTooltipRegion()) {
+          interactiveBridgeDeadlineRef.current = 0;
+          return;
+        }
+        if (interactive) {
+          const pointerArea = getInteractivePointerArea();
+          if (pointerArea === "direct") {
+            interactiveBridgeDeadlineRef.current = 0;
+            return;
+          }
+          if (pointerArea === "bridge") {
+            const now = window.performance.now();
+            if (interactiveBridgeDeadlineRef.current === 0) {
+              interactiveBridgeDeadlineRef.current = now + INTERACTIVE_BRIDGE_TIMEOUT;
+            }
+            const remaining = interactiveBridgeDeadlineRef.current - now;
+            if (remaining > 0) {
+              hideTimerRef.current = window.setTimeout(
+                attemptHide,
+                Math.min(
+                  INTERACTIVE_RECHECK_INTERVAL,
+                  remaining
+                )
+              );
+              return;
+            }
+          }
+        }
+        interactiveBridgeDeadlineRef.current = 0;
         runHide();
-      }, resolvedHideDelay);
+      };
+      hideTimerRef.current = window.setTimeout(
+        attemptHide,
+        resolvedHideDelay
+      );
     },
-    [clearHideTimer, resolvedHideDelay, runHide]
+    [
+      clearHideTimer,
+      getInteractivePointerArea,
+      interactive,
+      isFocusInsideTooltipRegion,
+      resolvedHideDelay,
+      runHide
+    ]
   );
   const showTooltip = useCallback(() => {
     if (!anchor || disabled) {
@@ -1144,6 +1359,7 @@ var useTooltip = ({
     }
     clearHideTimer();
     clearEnterFrames();
+    interactiveBridgeDeadlineRef.current = 0;
     pendingHideRef.current = false;
     setMounted(true);
     if (phaseRef.current === "entering" || phaseRef.current === "visible") {
@@ -1157,11 +1373,51 @@ var useTooltip = ({
       return;
     }
     clearHideTimer();
+    interactiveBridgeDeadlineRef.current = 0;
     pendingHideRef.current = false;
     if (phaseRef.current === "leaving") {
       updatePhase("visible");
     }
   }, [clearHideTimer, disabled, interactive, updatePhase]);
+  const processInteractivePointer = useCallback(() => {
+    if (!interactive || disabled || phaseRef.current === "hidden") {
+      return;
+    }
+    if (isFocusInsideTooltipRegion()) {
+      keepTooltipOpen();
+      return;
+    }
+    const pointerArea = getInteractivePointerArea();
+    if (pointerArea === "direct") {
+      keepTooltipOpen();
+      return;
+    }
+    if (pointerArea === "bridge") {
+      if (interactiveBridgeDeadlineRef.current === 0) {
+        interactiveBridgeDeadlineRef.current = window.performance.now() + INTERACTIVE_BRIDGE_TIMEOUT;
+      }
+      hideTooltip(false);
+      return;
+    }
+    interactiveBridgeDeadlineRef.current = 0;
+    hideTooltip(false);
+  }, [
+    disabled,
+    getInteractivePointerArea,
+    hideTooltip,
+    interactive,
+    isFocusInsideTooltipRegion,
+    keepTooltipOpen
+  ]);
+  const scheduleInteractivePointerProcessing = useCallback(() => {
+    if (interactiveFrameRef.current !== null) {
+      return;
+    }
+    interactiveFrameRef.current = window.requestAnimationFrame(() => {
+      interactiveFrameRef.current = null;
+      processInteractivePointer();
+    });
+  }, [processInteractivePointer]);
   const onAnimationEnd = useCallback(() => {
     const currentPhase = phaseRef.current;
     if (currentPhase === "entering") {
@@ -1206,35 +1462,112 @@ var useTooltip = ({
       removeTooltip();
       return;
     }
+    const updatePointer = (event) => {
+      pointerRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+        pointerType: event.pointerType
+      };
+    };
     const onPointerEnter = (event) => {
+      updatePointer(event);
       if (event.pointerType === "touch") {
         return;
       }
       showTooltip();
     };
     const onPointerLeave = (event) => {
+      updatePointer(event);
       if (event.pointerType === "touch") {
         return;
       }
-      const relatedTarget = event.relatedTarget;
-      const tooltip = tooltipRef.current;
-      if (interactive && relatedTarget instanceof Node && tooltip?.contains(relatedTarget)) {
-        keepTooltipOpen();
+      if (interactive) {
+        interactiveBridgeDeadlineRef.current = window.performance.now() + INTERACTIVE_BRIDGE_TIMEOUT;
+        hideTooltip(false);
+        scheduleInteractivePointerProcessing();
         return;
       }
       hideTooltip(false);
     };
     const onPointerDown = (event) => {
+      updatePointer(event);
+      if (event.pointerType !== "touch") {
+        return;
+      }
+      const now = window.performance.now();
+      touchGestureRef.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        startedAt: now,
+        moved: false,
+        cancelled: false
+      };
+      suppressFocusUntilRef.current = now + TOUCH_FOCUS_SUPPRESSION;
+    };
+    const onPointerMove = (event) => {
+      updatePointer(event);
+      if (event.pointerType !== "touch") {
+        return;
+      }
+      const gesture = touchGestureRef.current;
+      if (!gesture || gesture.pointerId !== event.pointerId) {
+        return;
+      }
+      const distance = Math.hypot(
+        event.clientX - gesture.startX,
+        event.clientY - gesture.startY
+      );
+      if (distance <= TOUCH_MOVE_THRESHOLD) {
+        return;
+      }
+      gesture.moved = true;
+      suppressFocusUntilRef.current = window.performance.now() + TOUCH_FOCUS_SUPPRESSION;
+      hideTooltip(true);
+    };
+    const onPointerUp = (event) => {
+      updatePointer(event);
       if (event.pointerType !== "touch") {
         return;
       }
+      const gesture = touchGestureRef.current;
+      touchGestureRef.current = null;
+      if (!gesture || gesture.pointerId !== event.pointerId) {
+        return;
+      }
+      const now = window.performance.now();
+      const distance = Math.hypot(
+        event.clientX - gesture.startX,
+        event.clientY - gesture.startY
+      );
+      const duration = now - gesture.startedAt;
+      suppressFocusUntilRef.current = now + TOUCH_FOCUS_SUPPRESSION;
+      if (gesture.cancelled || gesture.moved || distance > TOUCH_MOVE_THRESHOLD || duration > TOUCH_MAX_TAP_DURATION) {
+        return;
+      }
       if (phaseRef.current === "hidden" || phaseRef.current === "leaving") {
         showTooltip();
       } else {
         hideTooltip(true);
       }
     };
+    const onPointerCancel = (event) => {
+      if (event.pointerType !== "touch") {
+        return;
+      }
+      const gesture = touchGestureRef.current;
+      if (!gesture || gesture.pointerId !== event.pointerId) {
+        return;
+      }
+      gesture.cancelled = true;
+      touchGestureRef.current = null;
+      suppressFocusUntilRef.current = window.performance.now() + TOUCH_FOCUS_SUPPRESSION;
+      hideTooltip(true);
+    };
     const onFocusIn = () => {
+      if (window.performance.now() < suppressFocusUntilRef.current) {
+        return;
+      }
       showTooltip();
     };
     const onFocusOut = (event) => {
@@ -1248,51 +1581,66 @@ var useTooltip = ({
     anchor.addEventListener("pointerenter", onPointerEnter);
     anchor.addEventListener("pointerleave", onPointerLeave);
     anchor.addEventListener("pointerdown", onPointerDown);
+    anchor.addEventListener("pointermove", onPointerMove);
+    anchor.addEventListener("pointerup", onPointerUp);
+    anchor.addEventListener("pointercancel", onPointerCancel);
     anchor.addEventListener("focusin", onFocusIn);
     anchor.addEventListener("focusout", onFocusOut);
     return () => {
       anchor.removeEventListener("pointerenter", onPointerEnter);
       anchor.removeEventListener("pointerleave", onPointerLeave);
       anchor.removeEventListener("pointerdown", onPointerDown);
+      anchor.removeEventListener("pointermove", onPointerMove);
+      anchor.removeEventListener("pointerup", onPointerUp);
+      anchor.removeEventListener("pointercancel", onPointerCancel);
       anchor.removeEventListener("focusin", onFocusIn);
       anchor.removeEventListener("focusout", onFocusOut);
+      touchGestureRef.current = null;
       clearHideTimer();
       clearEnterFrames();
+      clearInteractiveFrame();
     };
   }, [
     anchor,
     clearEnterFrames,
     clearHideTimer,
+    clearInteractiveFrame,
     hideTooltip,
     interactive,
-    keepTooltipOpen,
     removeTooltip,
+    scheduleInteractivePointerProcessing,
     showTooltip
   ]);
   useEffect(() => {
-    if (!interactive || !mounted) {
+    if (!interactive || phase === "hidden") {
       return;
     }
     const tooltip = tooltipRef.current;
     if (!tooltip) {
       return;
     }
+    const updatePointer = (event) => {
+      pointerRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+        pointerType: event.pointerType
+      };
+    };
     const onPointerEnter = (event) => {
+      updatePointer(event);
       if (event.pointerType === "touch") {
         return;
       }
       keepTooltipOpen();
     };
     const onPointerLeave = (event) => {
+      updatePointer(event);
       if (event.pointerType === "touch") {
         return;
       }
-      const relatedTarget = event.relatedTarget;
-      if (relatedTarget instanceof Node && anchor?.contains(relatedTarget)) {
-        keepTooltipOpen();
-        return;
-      }
+      interactiveBridgeDeadlineRef.current = window.performance.now() + INTERACTIVE_BRIDGE_TIMEOUT;
       hideTooltip(false);
+      scheduleInteractivePointerProcessing();
     };
     const onFocusIn = () => {
       keepTooltipOpen();
@@ -1319,7 +1667,36 @@ var useTooltip = ({
     hideTooltip,
     interactive,
     keepTooltipOpen,
-    mounted
+    phase,
+    scheduleInteractivePointerProcessing
+  ]);
+  useEffect(() => {
+    if (!interactive || phase === "hidden") {
+      return;
+    }
+    const onDocumentPointerMove = (event) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+      pointerRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+        pointerType: event.pointerType
+      };
+      scheduleInteractivePointerProcessing();
+    };
+    document.addEventListener("pointermove", onDocumentPointerMove, {
+      passive: true
+    });
+    return () => {
+      document.removeEventListener("pointermove", onDocumentPointerMove);
+      clearInteractiveFrame();
+    };
+  }, [
+    clearInteractiveFrame,
+    interactive,
+    phase,
+    scheduleInteractivePointerProcessing
   ]);
   useEffect(() => {
     if (!anchor || phase === "hidden") {
@@ -1331,6 +1708,7 @@ var useTooltip = ({
       if (target instanceof Node && (anchor.contains(target) || interactive && tooltip?.contains(target))) {
         return;
       }
+      touchGestureRef.current = null;
       hideTooltip(true);
     };
     const onKeyDown = (event) => {
@@ -1338,11 +1716,7 @@ var useTooltip = ({
         hideTooltip(true);
       }
     };
-    document.addEventListener(
-      "pointerdown",
-      onDocumentPointerDown,
-      true
-    );
+    document.addEventListener("pointerdown", onDocumentPointerDown, true);
     document.addEventListener("keydown", onKeyDown);
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -1356,13 +1730,7 @@ var useTooltip = ({
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition, true);
     };
-  }, [
-    anchor,
-    calculatePosition,
-    hideTooltip,
-    interactive,
-    phase
-  ]);
+  }, [anchor, calculatePosition, hideTooltip, interactive, phase]);
   useLayoutEffect(() => {
     if (phase === "hidden") {
       return;
@@ -1729,7 +2097,8 @@ import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 var DEFAULT_TOOLTIP_VALUES = {
   defaultRenderPosition: "top",
-  selectTheme: "primary"
+  selectTheme: "primary",
+  interactive: false
 };
 var TooltipContext = createContext(DEFAULT_TOOLTIP_VALUES);
 var TooltipProvider = ({
@@ -1737,16 +2106,27 @@ var TooltipProvider = ({
   defaultRenderPosition = DEFAULT_TOOLTIP_VALUES.defaultRenderPosition,
   selectTheme = DEFAULT_TOOLTIP_VALUES.selectTheme,
   customTheme,
-  animation
+  animation,
+  interactive = DEFAULT_TOOLTIP_VALUES.interactive,
+  hideDelay
 }) => {
   const value = useMemo(() => {
     return {
       defaultRenderPosition,
       selectTheme,
       customTheme,
-      animation
+      animation,
+      interactive,
+      hideDelay
     };
-  }, [animation, customTheme, defaultRenderPosition, selectTheme]);
+  }, [
+    animation,
+    customTheme,
+    defaultRenderPosition,
+    hideDelay,
+    interactive,
+    selectTheme
+  ]);
   return /* @__PURE__ */ jsx(TooltipContext.Provider, { value, children });
 };
 var useTooltipDefaults = () => {
@@ -2211,7 +2591,7 @@ var Tooltip = ({
   customTheme,
   animation,
   disabled = false,
-  interactive = false,
+  interactive,
   hideDelay
 }) => {
   const defaults = useTooltipDefaults();
@@ -2255,6 +2635,8 @@ var Tooltip = ({
   const animationSpeed = animation?.speed ?? localThemeAnimation?.speed ?? defaults.animation?.speed ?? inheritedTheme.animation?.speed ?? "120ms";
   const animationEasing = animation?.easing ?? localThemeAnimation?.easing ?? defaults.animation?.easing ?? inheritedTheme.animation?.easing ?? "ease-in-out";
   const preferredPlacement = position ?? defaults.defaultRenderPosition;
+  const resolvedInteractive = interactive ?? defaults.interactive;
+  const resolvedHideDelay = hideDelay ?? defaults.hideDelay;
   const {
     shouldRender,
     phase,
@@ -2267,8 +2649,8 @@ var Tooltip = ({
     anchor,
     preferredPlacement,
     disabled: disabled || content === null || content === void 0,
-    interactive,
-    hideDelay
+    interactive: resolvedInteractive,
+    hideDelay: resolvedHideDelay
   });
   const arrowSize = theme.arrow?.size ?? "6px";
   const arrowWidth = theme.arrow?.width ?? `calc(${arrowSize} * 2)`;
@@ -2304,7 +2686,7 @@ var Tooltip = ({
           `tooltip-container--phase-${phase}`,
           `tooltip-container--show-${showAnimation}`,
           `tooltip-container--hide-${hideAnimation}`,
-          interactive ? "tooltip-container--interactive" : null
+          resolvedInteractive ? "tooltip-container--interactive" : null
         ].filter(Boolean).join(" "),
         style: containerStyle,
         children: /* @__PURE__ */ jsxs2(