@ssaprt/tooltip 1.0.0 → 1.0.4

package/dist/index.js

@@ -372,7 +372,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",
@@ -382,25 +382,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)",
@@ -408,7 +406,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
@@ -773,7 +770,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
@@ -960,6 +956,70 @@ 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 activeTooltipSession = null;
+var inputModality = "pointer";
+var inputModalitySubscribers = 0;
+var handleGlobalPointerDown = () => {
+  inputModality = "pointer";
+};
+var keyboardFocusKeys = /* @__PURE__ */ new Set([
+  "Tab",
+  "Enter",
+  " ",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown"
+]);
+var handleGlobalKeyDown = (event) => {
+  if (event.metaKey || event.ctrlKey || event.altKey || !keyboardFocusKeys.has(event.key)) {
+    return;
+  }
+  inputModality = "keyboard";
+};
+var subscribeInputModality = () => {
+  inputModalitySubscribers += 1;
+  if (inputModalitySubscribers !== 1) {
+    return;
+  }
+  document.addEventListener("pointerdown", handleGlobalPointerDown, true);
+  document.addEventListener("keydown", handleGlobalKeyDown, true);
+};
+var unsubscribeInputModality = () => {
+  inputModalitySubscribers = Math.max(0, inputModalitySubscribers - 1);
+  if (inputModalitySubscribers !== 0) {
+    return;
+  }
+  document.removeEventListener("pointerdown", handleGlobalPointerDown, true);
+  document.removeEventListener("keydown", handleGlobalKeyDown, true);
+};
+var requestTooltipActivation = (session, point) => {
+  const currentSession = activeTooltipSession;
+  if (currentSession && currentSession.owner !== session.owner) {
+    if (point && currentSession.interactive && currentSession.protectsPoint(point)) {
+      return false;
+    }
+    currentSession.close();
+  }
+  activeTooltipSession = session;
+  return true;
+};
+var clearTooltipActivation = (owner) => {
+  if (activeTooltipSession?.owner === owner) {
+    activeTooltipSession = null;
+  }
+};
 var oppositePlacement = {
   top: "bottom",
   bottom: "top",
@@ -970,6 +1030,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,
@@ -979,11 +1145,22 @@ var useTooltip = ({
 }) => {
   const tooltipRef = (0, import_react.useRef)(null);
   const bodyRef = (0, import_react.useRef)(null);
+  const ownerRef = (0, import_react.useRef)(/* @__PURE__ */ Symbol("tooltip"));
   const hideTimerRef = (0, import_react.useRef)(null);
   const firstFrameRef = (0, import_react.useRef)(null);
   const secondFrameRef = (0, import_react.useRef)(null);
+  const interactiveFrameRef = (0, import_react.useRef)(null);
   const phaseRef = (0, import_react.useRef)("hidden");
   const pendingHideRef = (0, import_react.useRef)(false);
+  const interactiveBridgeDeadlineRef = (0, import_react.useRef)(0);
+  const pointerRef = (0, import_react.useRef)({
+    x: Number.NaN,
+    y: Number.NaN,
+    pointerType: ""
+  });
+  const interactiveAreaAtPointRef = (0, import_react.useRef)(() => "outside");
+  const touchGestureRef = (0, import_react.useRef)(null);
+  const suppressFocusUntilRef = (0, import_react.useRef)(0);
   const [mounted, setMounted] = (0, import_react.useState)(false);
   const [phase, setPhase] = (0, import_react.useState)("hidden");
   const [placement, setPlacement] = (0, import_react.useState)(preferredPlacement);
@@ -1015,6 +1192,13 @@ var useTooltip = ({
       secondFrameRef.current = null;
     }
   }, []);
+  const clearInteractiveFrame = (0, import_react.useCallback)(() => {
+    if (interactiveFrameRef.current === null) {
+      return;
+    }
+    window.cancelAnimationFrame(interactiveFrameRef.current);
+    interactiveFrameRef.current = null;
+  }, []);
   const getAvailableSpace = (0, import_react.useCallback)(
     (currentPlacement, rect) => {
       switch (currentPlacement) {
@@ -1054,10 +1238,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) {
@@ -1115,12 +1296,71 @@ var useTooltip = ({
       "--tooltip-arrow-offset": arrowOffset
     });
   }, [anchor, getAvailableSpace, preferredPlacement]);
+  const isFocusInsideTooltipRegion = (0, import_react.useCallback)(() => {
+    if (!anchor || typeof document === "undefined" || inputModality !== "keyboard") {
+      return false;
+    }
+    const activeElement = document.activeElement;
+    const tooltip = tooltipRef.current;
+    if (!(activeElement instanceof Node)) {
+      return false;
+    }
+    return anchor.contains(activeElement) || Boolean(interactive && tooltip?.contains(activeElement));
+  }, [anchor, interactive]);
+  const getInteractivePointerAreaAtPoint = (0, import_react.useCallback)(
+    (point) => {
+      if (!interactive || !anchor) {
+        return "outside";
+      }
+      const tooltip = tooltipRef.current;
+      if (!tooltip || !Number.isFinite(point.x) || !Number.isFinite(point.y)) {
+        return "outside";
+      }
+      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]
+  );
+  (0, import_react.useLayoutEffect)(() => {
+    interactiveAreaAtPointRef.current = getInteractivePointerAreaAtPoint;
+  }, [getInteractivePointerAreaAtPoint]);
+  const getInteractivePointerArea = (0, import_react.useCallback)(() => {
+    const pointer = pointerRef.current;
+    if (pointer.pointerType !== "mouse" && pointer.pointerType !== "pen" || !Number.isFinite(pointer.x) || !Number.isFinite(pointer.y)) {
+      return "outside";
+    }
+    return getInteractivePointerAreaAtPoint({
+      x: pointer.x,
+      y: pointer.y
+    });
+  }, [getInteractivePointerAreaAtPoint]);
   const removeTooltip = (0, import_react.useCallback)(() => {
     clearHideTimer();
     clearEnterFrames();
+    clearInteractiveFrame();
     pendingHideRef.current = false;
+    interactiveBridgeDeadlineRef.current = 0;
+    clearTooltipActivation(ownerRef.current);
+    setMounted(false);
     updatePhase("hidden");
-  }, [clearEnterFrames, clearHideTimer, updatePhase]);
+  }, [clearEnterFrames, clearHideTimer, clearInteractiveFrame, updatePhase]);
   const runHide = (0, import_react.useCallback)(() => {
     const currentPhase = phaseRef.current;
     if (currentPhase === "hidden" || currentPhase === "leaving") {
@@ -1138,42 +1378,157 @@ var useTooltip = ({
   }, [removeTooltip, updatePhase]);
   const hideTooltip = (0, import_react.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 = (0, import_react.useCallback)(
+    (activationPoint) => {
+      if (!anchor || disabled) {
+        return;
+      }
+      const activated = requestTooltipActivation(
+        {
+          owner: ownerRef.current,
+          interactive,
+          protectsPoint: (point) => {
+            if (phaseRef.current === "hidden") {
+              return false;
+            }
+            return interactiveAreaAtPointRef.current(point) !== "outside";
+          },
+          close: () => {
+            hideTooltip(true);
+          }
+        },
+        activationPoint
+      );
+      if (!activated) {
+        return;
+      }
+      clearHideTimer();
+      clearEnterFrames();
+      interactiveBridgeDeadlineRef.current = 0;
+      pendingHideRef.current = false;
+      setMounted(true);
+      if (phaseRef.current === "entering" || phaseRef.current === "visible") {
+        return;
+      }
+      updatePhase("preparing");
+      setShowVersion((value) => value + 1);
+    },
+    [
+      anchor,
+      clearEnterFrames,
+      clearHideTimer,
+      disabled,
+      hideTooltip,
+      interactive,
+      updatePhase
+    ]
   );
-  const showTooltip = (0, import_react.useCallback)(() => {
-    if (!anchor || disabled) {
-      return;
-    }
-    clearHideTimer();
-    clearEnterFrames();
-    pendingHideRef.current = false;
-    setMounted(true);
-    if (phaseRef.current === "entering" || phaseRef.current === "visible") {
-      return;
-    }
-    updatePhase("preparing");
-    setShowVersion((value) => value + 1);
-  }, [anchor, clearEnterFrames, clearHideTimer, disabled, updatePhase]);
   const keepTooltipOpen = (0, import_react.useCallback)(() => {
     if (!interactive || disabled) {
       return;
     }
     clearHideTimer();
+    interactiveBridgeDeadlineRef.current = 0;
     pendingHideRef.current = false;
     if (phaseRef.current === "leaving") {
       updatePhase("visible");
     }
   }, [clearHideTimer, disabled, interactive, updatePhase]);
+  const processInteractivePointer = (0, import_react.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 = (0, import_react.useCallback)(() => {
+    if (interactiveFrameRef.current !== null) {
+      return;
+    }
+    interactiveFrameRef.current = window.requestAnimationFrame(() => {
+      interactiveFrameRef.current = null;
+      processInteractivePointer();
+    });
+  }, [processInteractivePointer]);
   const onAnimationEnd = (0, import_react.useCallback)(() => {
     const currentPhase = phaseRef.current;
     if (currentPhase === "entering") {
@@ -1213,40 +1568,130 @@ var useTooltip = ({
     showVersion,
     updatePhase
   ]);
+  (0, import_react.useEffect)(() => {
+    subscribeInputModality();
+    return () => {
+      unsubscribeInputModality();
+      clearTooltipActivation(ownerRef.current);
+    };
+  }, []);
   (0, import_react.useEffect)(() => {
     if (!anchor) {
       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();
+      showTooltip({
+        x: event.clientX,
+        y: event.clientY
+      });
     };
     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();
+        showTooltip({
+          x: event.clientX,
+          y: event.clientY
+        });
       } 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) => {
@@ -1260,54 +1705,71 @@ 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
   ]);
   (0, import_react.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();
+      if (inputModality === "keyboard") {
+        keepTooltipOpen();
+      }
     };
     const onFocusOut = (event) => {
       const relatedTarget = event.relatedTarget;
@@ -1331,7 +1793,36 @@ var useTooltip = ({
     hideTooltip,
     interactive,
     keepTooltipOpen,
-    mounted
+    phase,
+    scheduleInteractivePointerProcessing
+  ]);
+  (0, import_react.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
   ]);
   (0, import_react.useEffect)(() => {
     if (!anchor || phase === "hidden") {
@@ -1343,6 +1834,7 @@ var useTooltip = ({
       if (target instanceof Node && (anchor.contains(target) || interactive && tooltip?.contains(target))) {
         return;
       }
+      touchGestureRef.current = null;
       hideTooltip(true);
     };
     const onKeyDown = (event) => {
@@ -1350,11 +1842,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);
@@ -1368,13 +1856,7 @@ var useTooltip = ({
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition, true);
     };
-  }, [
-    anchor,
-    calculatePosition,
-    hideTooltip,
-    interactive,
-    phase
-  ]);
+  }, [anchor, calculatePosition, hideTooltip, interactive, phase]);
   (0, import_react.useLayoutEffect)(() => {
     if (phase === "hidden") {
       return;
@@ -1741,7 +2223,8 @@ var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_TOOLTIP_VALUES = {
   defaultRenderPosition: "top",
-  selectTheme: "primary"
+  selectTheme: "primary",
+  interactive: false
 };
 var TooltipContext = (0, import_react2.createContext)(DEFAULT_TOOLTIP_VALUES);
 var TooltipProvider = ({
@@ -1749,16 +2232,27 @@ var TooltipProvider = ({
   defaultRenderPosition = DEFAULT_TOOLTIP_VALUES.defaultRenderPosition,
   selectTheme = DEFAULT_TOOLTIP_VALUES.selectTheme,
   customTheme,
-  animation
+  animation,
+  interactive = DEFAULT_TOOLTIP_VALUES.interactive,
+  hideDelay
 }) => {
   const value = (0, import_react2.useMemo)(() => {
     return {
       defaultRenderPosition,
       selectTheme,
       customTheme,
-      animation
+      animation,
+      interactive,
+      hideDelay
     };
-  }, [animation, customTheme, defaultRenderPosition, selectTheme]);
+  }, [
+    animation,
+    customTheme,
+    defaultRenderPosition,
+    hideDelay,
+    interactive,
+    selectTheme
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContext.Provider, { value, children });
 };
 var useTooltipDefaults = () => {
@@ -2219,7 +2713,7 @@ var Tooltip = ({
   customTheme,
   animation,
   disabled = false,
-  interactive = false,
+  interactive,
   hideDelay
 }) => {
   const defaults = useTooltipDefaults();
@@ -2263,6 +2757,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,
@@ -2275,8 +2771,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)`;
@@ -2312,7 +2808,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__ */ (0, import_jsx_runtime3.jsxs)(