@base-ui/react 1.4.1 → 1.5.0

package/esm/tooltip/root/TooltipRoot.js

@@ -5,9 +5,10 @@ import { fastComponent } from '@base-ui/utils/fastHooks';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { TooltipRootContext } from "./TooltipRootContext.js";
-import { useClientPoint, useDismiss, useInteractions } from "../../floating-ui-react/index.js";
+import { useClientPoint, useDismiss } from "../../floating-ui-react/index.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
-import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
+import { FOCUSABLE_POPUP_PROPS, useImplicitActiveTrigger, useOpenStateTransitions, usePopupInteractionProps } from "../../utils/popups/index.js";
+import { mergeProps } from "../../merge-props/index.js";
 import { TooltipStore } from "../store/TooltipStore.js";
 import { REASONS } from "../../internals/reasons.js";
 
@@ -17,7 +18,7 @@ import { REASONS } from "../../internals/reasons.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TooltipRoot = fastComponent(function TooltipRoot(props) {
   const {
     disabled = false,
@@ -56,23 +57,18 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
   const openState = store.useState('open');
   const open = !disabled && openState;
   const activeTriggerId = store.useState('activeTriggerId');
+  const mounted = store.useState('mounted');
   const payload = store.useState('payload');
   store.useSyncedValues({
     trackCursorAxis,
     disableHoverablePopup
   });
-  useIsoLayoutEffect(() => {
-    if (openState && disabled) {
-      store.setOpen(false, createChangeEventDetails(REASONS.disabled));
-    }
-  }, [openState, disabled, store]);
   store.useSyncedValue('disabled', disabled);
   useImplicitActiveTrigger(store);
   const {
     forceUnmount,
     transitionStatus
   } = useOpenStateTransitions(open, store);
-  const floatingRootContext = store.select('floatingRootContext');
   const isInstantPhase = store.useState('isInstantPhase');
   const instantType = store.useState('instantType');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
@@ -83,6 +79,11 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
   // Otherwise, allow the animation to play. In particular, do not disable animations
   // during the 'ending' phase unless it's due to a sibling opening.
   const previousInstantTypeRef = React.useRef(null);
+  useIsoLayoutEffect(() => {
+    if (openState && disabled) {
+      store.setOpen(false, createChangeEventDetails(REASONS.disabled));
+    }
+  }, [openState, disabled, store]);
   useIsoLayoutEffect(() => {
     if (transitionStatus === 'ending' && lastOpenChangeReason === REASONS.none || transitionStatus !== 'ending' && isInstantPhase) {
       // Capture the current instant type so we can restore it later
@@ -111,6 +112,25 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
+  const shouldRenderInteractions = open || mounted || !disabled && trackCursorAxis !== 'none';
+  return /*#__PURE__*/_jsxs(TooltipRootContext.Provider, {
+    value: store,
+    children: [shouldRenderInteractions && /*#__PURE__*/_jsx(TooltipInteractions, {
+      store: store,
+      disabled: disabled,
+      trackCursorAxis: trackCursorAxis
+    }), typeof children === 'function' ? children({
+      payload
+    }) : children]
+  });
+});
+if (process.env.NODE_ENV !== "production") TooltipRoot.displayName = "TooltipRoot";
+function TooltipInteractions({
+  store,
+  disabled,
+  trackCursorAxis
+}) {
+  const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = useDismiss(floatingRootContext, {
     enabled: !disabled,
     referencePress: () => store.select('closeOnClick')
@@ -119,24 +139,13 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
     enabled: !disabled && trackCursorAxis !== 'none',
     axis: trackCursorAxis === 'none' ? undefined : trackCursorAxis
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = useInteractions([dismiss, clientPoint]);
-  const activeTriggerProps = React.useMemo(() => getReferenceProps(), [getReferenceProps]);
-  const inactiveTriggerProps = React.useMemo(() => getTriggerProps(), [getTriggerProps]);
-  const popupProps = React.useMemo(() => getFloatingProps(), [getFloatingProps]);
-  store.useSyncedValues({
+  const activeTriggerProps = React.useMemo(() => mergeProps(clientPoint.reference, dismiss.reference), [clientPoint.reference, dismiss.reference]);
+  const inactiveTriggerProps = React.useMemo(() => mergeProps(clientPoint.trigger, dismiss.trigger), [clientPoint.trigger, dismiss.trigger]);
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, clientPoint.floating, dismiss.floating), [clientPoint.floating, dismiss.floating]);
+  usePopupInteractionProps(store, {
     activeTriggerProps,
     inactiveTriggerProps,
     popupProps
   });
-  return /*#__PURE__*/_jsx(TooltipRootContext.Provider, {
-    value: store,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
-  });
-});
-if (process.env.NODE_ENV !== "production") TooltipRoot.displayName = "TooltipRoot";
+  return null;
+}

package/esm/tooltip/store/TooltipHandle.js

@@ -43,7 +43,7 @@ export class TooltipHandle {
    * Indicates whether the tooltip is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }
 

package/esm/tooltip/store/TooltipStore.d.ts

@@ -18,7 +18,7 @@ export type Context = PopupStoreContext<TooltipRoot.ChangeEventDetails> & {
 };
 declare const selectors: {
   disabled: (state: State<unknown>) => boolean;
-  instantType: (state: State<unknown>) => "focus" | "delay" | "dismiss" | undefined;
+  instantType: (state: State<unknown>) => "delay" | "focus" | "dismiss" | undefined;
   isInstantPhase: (state: State<unknown>) => boolean;
   trackCursorAxis: (state: State<unknown>) => "none" | "both" | "x" | "y";
   disableHoverablePopup: (state: State<unknown>) => boolean;
@@ -32,6 +32,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -49,6 +51,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -66,6 +70,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -83,6 +89,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -94,12 +102,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  triggerCount: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => number;
   preventUnmountingOnClose: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -117,6 +146,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -134,6 +165,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -151,6 +184,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -162,12 +197,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => Element | null;
+  popupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => string | undefined;
   isTriggerActive: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -185,6 +241,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -202,6 +260,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -219,6 +279,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -230,12 +292,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }, isActive: boolean) => import("../../index.js").HTMLProps;
+  triggerPopupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => string | undefined;
   popupProps: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -253,6 +336,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -270,6 +355,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -283,8 +370,9 @@ declare const selectors: {
   }) => HTMLElement | null;
 };
 export declare class TooltipStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
-  constructor(initialState?: Partial<State<Payload>>);
+  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
   setOpen: (nextOpen: boolean, eventDetails: Omit<TooltipRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
+  cancelPendingOpen(event: MouseEvent | PointerEvent): void;
   static useStore<Payload>(externalStore: TooltipStore<Payload> | undefined, initialState?: Partial<State<Payload>>): TooltipStore<Payload>;
 }
 export {};

package/esm/tooltip/store/TooltipStore.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createSelector, ReactStore } from '@base-ui/utils/store';
-import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
-import { useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
-import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.js";
+import { createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, setOpenTriggerState, usePopupStore } from "../../utils/popups/index.js";
 const selectors = {
   ...popupStoreSelectors,
   disabled: createSelector(state => state.disabled),
@@ -18,15 +17,18 @@ const selectors = {
   hasViewport: createSelector(state => state.hasViewport)
 };
 export class TooltipStore extends ReactStore {
-  constructor(initialState) {
-    super({
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new PopupTriggerMap();
+    const state = {
       ...createInitialState(),
       ...initialState
-    }, {
+    };
+    state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+    super(state, {
       popupRef: /*#__PURE__*/React.createRef(),
       onOpenChange: undefined,
       onOpenChangeComplete: undefined,
-      triggerElements: new PopupTriggerMap()
+      triggerElements
     }, selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
@@ -54,14 +56,7 @@ export class TooltipStore extends ReactStore {
       } else if (reason === REASONS.triggerHover) {
         updatedState.instantType = undefined;
       }
-
-      // If a popup is closing, the `trigger` may be null.
-      // We want to keep the previous value so that exit animations are played and focus is returned correctly.
-      const newTriggerId = eventDetails.trigger?.id ?? null;
-      if (newTriggerId || nextOpen) {
-        updatedState.activeTriggerId = newTriggerId;
-        updatedState.activeTriggerElement = eventDetails.trigger ?? null;
-      }
+      setOpenTriggerState(updatedState, nextOpen, eventDetails.trigger);
       this.update(updatedState);
     };
     if (isHover) {
@@ -72,24 +67,16 @@ export class TooltipStore extends ReactStore {
       changeState();
     }
   };
-  static useStore(externalStore, initialState) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const internalStore = useRefWithInit(() => {
-      return new TooltipStore(initialState);
-    }).current;
-    const store = externalStore ?? internalStore;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const floatingRootContext = useSyncedFloatingRootContext({
-      popupStore: store,
-      onOpenChange: store.setOpen
-    });
+  // Used by trigger clicks to clear a delayed hover open without reporting a public open-state change.
+  cancelPendingOpen(event) {
+    this.state.floatingRootContext.dispatchOpenChange(false, createChangeEventDetails(REASONS.triggerPress, event));
+  }
+  static useStore(externalStore, initialState) {
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const store = usePopupStore(externalStore, (floatingId, nested) => new TooltipStore(initialState, floatingId, nested)).store;
+    /* eslint-enable react-hooks/rules-of-hooks */
 
-    // It's safe to set this here because when this code runs for the first time,
-    // nothing has had a chance to subscribe to the `store` yet.
-    // For subsequent renders, the `floatingRootContext` reference remains the same,
-    // so it's basically a no-op.
-    store.state.floatingRootContext = floatingRootContext;
     return store;
   }
 }

package/esm/tooltip/trigger/TooltipTrigger.js

@@ -2,7 +2,10 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
+import { isElement } from '@floating-ui/utils/dom';
 import { fastComponentRef } from '@base-ui/utils/fastHooks';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useTooltipRootContext } from "../root/TooltipRootContext.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
@@ -10,8 +13,46 @@ import { useTriggerDataForwarding } from "../../utils/popups/index.js";
 import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { useTooltipProviderContext } from "../provider/TooltipProviderContext.js";
 import { safePolygon, useDelayGroup, useFocus, useHoverReferenceInteraction } from "../../floating-ui-react/index.js";
+import { contains } from "../../floating-ui-react/utils/element.js";
+import { isMouseLikePointerType } from "../../floating-ui-react/utils/event.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { TooltipTriggerDataAttributes } from "./TooltipTriggerDataAttributes.js";
+import { useHoverInteractionSharedState } from "../../floating-ui-react/hooks/useHoverInteractionSharedState.js";
 import { OPEN_DELAY } from "../utils/constants.js";
+const TOOLTIP_TRIGGER_IDENTIFIER = 'data-base-ui-tooltip-trigger';
+function getTargetElement(event) {
+  if ('composedPath' in event) {
+    const path = event.composedPath();
+    for (let i = 0; i < path.length; i += 1) {
+      const element = path[i];
+      if (isElement(element)) {
+        return element;
+      }
+    }
+  }
+  const target = event.target;
+  if (isElement(target)) {
+    return target;
+  }
+  return null;
+}
+function closestEnabledTooltipTrigger(element) {
+  let current = element;
+  while (current) {
+    if (current.hasAttribute(TOOLTIP_TRIGGER_IDENTIFIER)) {
+      return current;
+    }
+    const parentElement = current.parentElement;
+    if (parentElement) {
+      current = parentElement;
+      continue;
+    }
+    const root = current.getRootNode();
+    current = 'host' in root && isElement(root.host) ? root.host : null;
+  }
+  return null;
+}
 
 /**
  * An element to attach the tooltip to.
@@ -21,8 +62,9 @@ import { OPEN_DELAY } from "../utils/constants.js";
  */
 export const TooltipTrigger = fastComponentRef(function TooltipTrigger(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     handle,
     payload,
     disabled: disabledProp,
@@ -30,7 +72,6 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
     closeOnClick = true,
     closeDelay,
     id: idProp,
-    style,
     ...elementProps
   } = componentProps;
   const rootContext = useTooltipRootContext(true);
@@ -61,29 +102,55 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
   } = useDelayGroup(floatingRootContext, {
     open: isOpenedByThisTrigger
   });
+  const hoverInteraction = useHoverInteractionSharedState(floatingRootContext);
   store.useSyncedValue('isInstantPhase', isInstantPhase);
   const rootDisabled = store.useState('disabled');
   const disabled = disabledProp ?? rootDisabled;
+  const disabledRef = useValueAsRef(disabled);
   const trackCursorAxis = store.useState('trackCursorAxis');
   const disableHoverablePopup = store.useState('disableHoverablePopup');
+  const isNestedTriggerHoveredRef = React.useRef(false);
+  const nestedTriggerOpenTimeout = useTimeout();
+  // Local copy so it can be cleared on mouseLeave without resetting the hover hook's own pointerType.
+  const pointerTypeRef = React.useRef(undefined);
+  function getOpenDelay() {
+    const providerDelay = providerContext?.delay;
+    const groupOpenValue = typeof delayRef.current === 'object' ? delayRef.current.open : undefined;
+    let computedOpenDelay = delayWithDefault;
+    if (hasProvider) {
+      if (groupOpenValue !== 0) {
+        computedOpenDelay = delay ?? providerDelay ?? delayWithDefault;
+      } else {
+        computedOpenDelay = 0;
+      }
+    }
+    return computedOpenDelay;
+  }
+  function isEnabledNestedTriggerTarget(target) {
+    const triggerEl = triggerElementRef.current;
+    if (!triggerEl || !target) {
+      return false;
+    }
+    const nearestTrigger = closestEnabledTooltipTrigger(target);
+    return nearestTrigger !== null && nearestTrigger !== triggerEl && contains(triggerEl, nearestTrigger);
+  }
+  function detectNestedTriggerHover(target) {
+    const nestedTriggerHovered = isEnabledNestedTriggerTarget(target);
+    isNestedTriggerHoveredRef.current = nestedTriggerHovered;
+    if (nestedTriggerHovered) {
+      hoverInteraction.openChangeTimeout.clear();
+      hoverInteraction.restTimeout.clear();
+      hoverInteraction.restTimeoutPending = false;
+      nestedTriggerOpenTimeout.clear();
+    }
+    return nestedTriggerHovered;
+  }
   const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
     enabled: !disabled,
     mouseOnly: true,
     move: false,
     handleClose: !disableHoverablePopup && trackCursorAxis !== 'both' ? safePolygon() : null,
-    restMs() {
-      const providerDelay = providerContext?.delay;
-      const groupOpenValue = typeof delayRef.current === 'object' ? delayRef.current.open : undefined;
-      let computedRestMs = delayWithDefault;
-      if (hasProvider) {
-        if (groupOpenValue !== 0) {
-          computedRestMs = delay ?? providerDelay ?? delayWithDefault;
-        } else {
-          computedRestMs = 0;
-        }
-      }
-      return computedRestMs;
-    },
+    restMs: getOpenDelay,
     delay() {
       const closeValue = typeof delayRef.current === 'object' ? delayRef.current.close : undefined;
       let computedCloseDelay = closeDelayWithDefault;
@@ -96,24 +163,88 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
     },
     triggerElementRef,
     isActiveTrigger: isTriggerActive,
-    isClosing: () => store.select('transitionStatus') === 'ending'
+    isClosing: () => store.select('transitionStatus') === 'ending',
+    shouldOpen() {
+      return !isNestedTriggerHoveredRef.current;
+    }
   });
   const focusProps = useFocus(floatingRootContext, {
     enabled: !disabled
   }).reference;
+  const handleNestedTriggerHover = event => {
+    const wasNestedTriggerHovered = isNestedTriggerHoveredRef.current;
+    const target = getTargetElement(event);
+    const nestedTriggerHovered = detectNestedTriggerHover(target);
+    const triggerEl = triggerElementRef.current;
+    const targetInsideTrigger = triggerEl && target && contains(triggerEl, target);
+
+    // Only close hover-opened parents. Focus/click-like opens remain owned by
+    // their original interaction and should not be clobbered by nested hover.
+    if (nestedTriggerHovered && store.select('open') && store.select('lastOpenChangeReason') === REASONS.triggerHover) {
+      store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+      return;
+    }
+    if (wasNestedTriggerHovered && !nestedTriggerHovered && targetInsideTrigger && !disabledRef.current && !store.select('open') && triggerEl &&
+    // Match the hover hook's non-strict mouse fallback for mouse-only event sequences.
+    isMouseLikePointerType(pointerTypeRef.current)) {
+      const open = () => {
+        if (!isNestedTriggerHoveredRef.current && !disabledRef.current && !store.select('open')) {
+          store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerEl));
+        }
+      };
+      const openDelay = getOpenDelay();
+
+      // With `move: false`, the hover hook only listens to mouseenter/mouseleave
+      // on the parent trigger. Leaving a nested child for the parent area fires
+      // no event the hook can react to, so reopen locally.
+      if (openDelay === 0) {
+        nestedTriggerOpenTimeout.clear();
+        open();
+      } else {
+        nestedTriggerOpenTimeout.start(openDelay, open);
+      }
+    }
+  };
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const shouldApplyRootTriggerProps = isMountedByThisTrigger || trackCursorAxis !== 'none';
   const state = {
     open: isOpenedByThisTrigger
   };
-  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const element = useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, registerTrigger, triggerElementRef],
-    props: [hoverProps, focusProps, rootTriggerProps, {
-      onPointerDown() {
+    props: [hoverProps, focusProps, shouldApplyRootTriggerProps ? rootTriggerProps : undefined, {
+      onMouseOver(event) {
+        handleNestedTriggerHover(event.nativeEvent);
+      },
+      onFocus(event) {
+        if (isEnabledNestedTriggerTarget(getTargetElement(event.nativeEvent))) {
+          event.preventBaseUIHandler();
+        }
+      },
+      onMouseLeave() {
+        isNestedTriggerHoveredRef.current = false;
+        nestedTriggerOpenTimeout.clear();
+        pointerTypeRef.current = undefined;
+      },
+      onPointerEnter(event) {
+        pointerTypeRef.current = event.pointerType;
+      },
+      onPointerDown(event) {
+        pointerTypeRef.current = event.pointerType;
         store.set('closeOnClick', closeOnClick);
+        if (closeOnClick && !store.select('open')) {
+          store.cancelPendingOpen(event.nativeEvent);
+        }
+      },
+      onClick(event) {
+        if (closeOnClick && !store.select('open')) {
+          store.cancelPendingOpen(event.nativeEvent);
+        }
       },
       id: thisTriggerId,
-      [TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined
+      [TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined,
+      [TOOLTIP_TRIGGER_IDENTIFIER]: disabled ? undefined : ''
     }, elementProps],
     stateAttributesMapping: triggerOpenStateMapping
   });