@zag-js/tooltip 2.0.0-next.0 → 2.0.0-next.2

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './tooltip.anatomy.mjs';
 export { connect } from './tooltip.connect.mjs';
 export { machine } from './tooltip.machine.mjs';
 export { props, splitProps } from './tooltip.props.mjs';
-export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerValueChangeDetails } from './tooltip.types.mjs';
+export { TooltipApi as Api, ContentState, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerState, TriggerValueChangeDetails } from './tooltip.types.mjs';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/core';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './tooltip.anatomy.js';
 export { connect } from './tooltip.connect.js';
 export { machine } from './tooltip.machine.js';
 export { props, splitProps } from './tooltip.props.js';
-export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerValueChangeDetails } from './tooltip.types.js';
+export { TooltipApi as Api, ContentState, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerState, TriggerValueChangeDetails } from './tooltip.types.js';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/core';

package/dist/tooltip.connect.js

@@ -51,26 +51,37 @@ function connect(service, normalize) {
   const disabled = prop("disabled");
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    placement: currentPlacement
   });
+  function getTriggerState(props = {}) {
+    const { value } = props;
+    const current = value == null ? false : triggerValue === value;
+    return { value, current, open: value == null ? open : open && current };
+  }
+  function getContentState() {
+    const isCurrentTooltip = import_tooltip2.store.get("id") === id;
+    const isPrevTooltip = import_tooltip2.store.get("prevId") === id;
+    const instant = !!import_tooltip2.store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
+    return { open, instant, placement: currentPlacement, side: currentPlacementSide };
+  }
   return {
     open,
     setOpen(nextOpen) {
       const open2 = state.matches("open", "closing");
       if (open2 === nextOpen) return;
-      send({ type: nextOpen ? "open" : "close" });
+      send({ type: nextOpen ? "OPEN" : "CLOSE" });
     },
     triggerValue,
     setTriggerValue(value) {
-      send({ type: "triggerValue.set", value: value ?? void 0 });
+      send({ type: "TRIGGER_VALUE.SET", value: value ?? void 0 });
     },
     reposition(options = {}) {
-      send({ type: "positioning.set", options });
+      send({ type: "POSITIONING.SET", options });
     },
+    getTriggerState,
     getTriggerProps(props = {}) {
       const { value } = props;
-      const current = value == null ? false : triggerValue === value;
+      const { current } = getTriggerState(props);
       const triggerId = dom.getTriggerId(scope, value);
       return normalize.button({
         ...import_tooltip.parts.trigger.attrs(scope.id),
@@ -86,14 +97,14 @@ function connect(service, normalize) {
           if (disabled) return;
           if (!prop("closeOnClick")) return;
           const shouldSwitch = open && value != null && !current;
-          send({ type: shouldSwitch ? "triggerValue.set" : "close", src: "trigger.click", value, triggerId });
+          send({ type: shouldSwitch ? "TRIGGER_VALUE.SET" : "CLOSE", src: "trigger.click", value, triggerId });
         },
         onFocus(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (!(0, import_focus_visible.isFocusVisible)()) return;
           const shouldSwitch = open && value != null && !current;
-          send({ type: shouldSwitch ? "triggerValue.set" : "open", src: "trigger.focus", value, triggerId });
+          send({ type: shouldSwitch ? "TRIGGER_VALUE.SET" : "OPEN", src: "trigger.focus", value, triggerId });
         },
         onBlur(event) {
           if (event.defaultPrevented) return;
@@ -102,7 +113,7 @@ function connect(service, normalize) {
           const activeEl = event.relatedTarget ?? scope.getDoc().activeElement;
           const focusedAnotherTrigger = activeEl?.closest(`[${import_tooltip.parts.trigger.attr}="${scope.id}"]`) != null;
           if (!focusedAnotherTrigger) {
-            send({ type: "close", src: "trigger.blur", value, triggerId });
+            send({ type: "CLOSE", src: "trigger.blur", value, triggerId });
           }
         },
         onPointerDown(event) {
@@ -111,7 +122,7 @@ function connect(service, normalize) {
           if (!(0, import_dom_query.isLeftClick)(event)) return;
           if (!prop("closeOnPointerDown")) return;
           if (id === import_tooltip2.store.get("id")) {
-            send({ type: "close", src: "trigger.pointerdown", value, triggerId });
+            send({ type: "CLOSE", src: "trigger.pointerdown", value, triggerId });
           }
         },
         onPointerMove(event) {
@@ -119,21 +130,21 @@ function connect(service, normalize) {
           if (disabled) return;
           if (event.pointerType === "touch") return;
           const shouldSwitch = open && value != null && !current;
-          send({ type: shouldSwitch ? "triggerValue.set" : "pointer.move", value, triggerId });
+          send({ type: shouldSwitch ? "TRIGGER_VALUE.SET" : "POINTER_MOVE", value, triggerId });
         },
         onPointerOver(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move", value, triggerId });
+          send({ type: "POINTER_MOVE", value, triggerId });
         },
         onPointerLeave() {
           if (disabled) return;
-          send({ type: "pointer.leave" });
+          send({ type: "POINTER_LEAVE" });
         },
         onPointerCancel() {
           if (disabled) return;
-          send({ type: "pointer.leave" });
+          send({ type: "POINTER_LEAVE" });
         }
       });
     },
@@ -158,25 +169,21 @@ function connect(service, normalize) {
         style: popperStyles.floating
       });
     },
+    getContentState,
     getContentProps() {
-      const isCurrentTooltip = import_tooltip2.store.get("id") === id;
-      const isPrevTooltip = import_tooltip2.store.get("prevId") === id;
-      const instant = import_tooltip2.store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
+      const contentState = getContentState();
       return normalize.element({
         ...import_tooltip.parts.content.attrs(scope.id),
         dir: prop("dir"),
-        hidden: !open,
-        "data-state": open ? "open" : "closed",
-        "data-instant": (0, import_dom_query.dataAttr)(instant),
+        hidden: !contentState.open,
+        "data-state": contentState.open ? "open" : "closed",
+        "data-instant": (0, import_dom_query.dataAttr)(contentState.instant),
         role: hasAriaLabel ? void 0 : "tooltip",
         id: hasAriaLabel ? void 0 : contentId,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
         onPointerEnter() {
-          send({ type: "content.pointer.move" });
-        },
-        onPointerLeave() {
-          send({ type: "content.pointer.leave" });
+          send({ type: "CONTENT_POINTER_MOVE" });
         },
         style: {
           pointerEvents: prop("interactive") ? "auto" : "none"

package/dist/tooltip.connect.mjs

@@ -17,26 +17,37 @@ function connect(service, normalize) {
   const disabled = prop("disabled");
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    placement: currentPlacement
   });
+  function getTriggerState(props = {}) {
+    const { value } = props;
+    const current = value == null ? false : triggerValue === value;
+    return { value, current, open: value == null ? open : open && current };
+  }
+  function getContentState() {
+    const isCurrentTooltip = store.get("id") === id;
+    const isPrevTooltip = store.get("prevId") === id;
+    const instant = !!store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
+    return { open, instant, placement: currentPlacement, side: currentPlacementSide };
+  }
   return {
     open,
     setOpen(nextOpen) {
       const open2 = state.matches("open", "closing");
       if (open2 === nextOpen) return;
-      send({ type: nextOpen ? "open" : "close" });
+      send({ type: nextOpen ? "OPEN" : "CLOSE" });
     },
     triggerValue,
     setTriggerValue(value) {
-      send({ type: "triggerValue.set", value: value ?? void 0 });
+      send({ type: "TRIGGER_VALUE.SET", value: value ?? void 0 });
     },
     reposition(options = {}) {
-      send({ type: "positioning.set", options });
+      send({ type: "POSITIONING.SET", options });
     },
+    getTriggerState,
     getTriggerProps(props = {}) {
       const { value } = props;
-      const current = value == null ? false : triggerValue === value;
+      const { current } = getTriggerState(props);
       const triggerId = dom.getTriggerId(scope, value);
       return normalize.button({
         ...parts.trigger.attrs(scope.id),
@@ -52,14 +63,14 @@ function connect(service, normalize) {
           if (disabled) return;
           if (!prop("closeOnClick")) return;
           const shouldSwitch = open && value != null && !current;
-          send({ type: shouldSwitch ? "triggerValue.set" : "close", src: "trigger.click", value, triggerId });
+          send({ type: shouldSwitch ? "TRIGGER_VALUE.SET" : "CLOSE", src: "trigger.click", value, triggerId });
         },
         onFocus(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (!isFocusVisible()) return;
           const shouldSwitch = open && value != null && !current;
-          send({ type: shouldSwitch ? "triggerValue.set" : "open", src: "trigger.focus", value, triggerId });
+          send({ type: shouldSwitch ? "TRIGGER_VALUE.SET" : "OPEN", src: "trigger.focus", value, triggerId });
         },
         onBlur(event) {
           if (event.defaultPrevented) return;
@@ -68,7 +79,7 @@ function connect(service, normalize) {
           const activeEl = event.relatedTarget ?? scope.getDoc().activeElement;
           const focusedAnotherTrigger = activeEl?.closest(`[${parts.trigger.attr}="${scope.id}"]`) != null;
           if (!focusedAnotherTrigger) {
-            send({ type: "close", src: "trigger.blur", value, triggerId });
+            send({ type: "CLOSE", src: "trigger.blur", value, triggerId });
           }
         },
         onPointerDown(event) {
@@ -77,7 +88,7 @@ function connect(service, normalize) {
           if (!isLeftClick(event)) return;
           if (!prop("closeOnPointerDown")) return;
           if (id === store.get("id")) {
-            send({ type: "close", src: "trigger.pointerdown", value, triggerId });
+            send({ type: "CLOSE", src: "trigger.pointerdown", value, triggerId });
           }
         },
         onPointerMove(event) {
@@ -85,21 +96,21 @@ function connect(service, normalize) {
           if (disabled) return;
           if (event.pointerType === "touch") return;
           const shouldSwitch = open && value != null && !current;
-          send({ type: shouldSwitch ? "triggerValue.set" : "pointer.move", value, triggerId });
+          send({ type: shouldSwitch ? "TRIGGER_VALUE.SET" : "POINTER_MOVE", value, triggerId });
         },
         onPointerOver(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move", value, triggerId });
+          send({ type: "POINTER_MOVE", value, triggerId });
         },
         onPointerLeave() {
           if (disabled) return;
-          send({ type: "pointer.leave" });
+          send({ type: "POINTER_LEAVE" });
         },
         onPointerCancel() {
           if (disabled) return;
-          send({ type: "pointer.leave" });
+          send({ type: "POINTER_LEAVE" });
         }
       });
     },
@@ -124,25 +135,21 @@ function connect(service, normalize) {
         style: popperStyles.floating
       });
     },
+    getContentState,
     getContentProps() {
-      const isCurrentTooltip = store.get("id") === id;
-      const isPrevTooltip = store.get("prevId") === id;
-      const instant = store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
+      const contentState = getContentState();
       return normalize.element({
         ...parts.content.attrs(scope.id),
         dir: prop("dir"),
-        hidden: !open,
-        "data-state": open ? "open" : "closed",
-        "data-instant": dataAttr(instant),
+        hidden: !contentState.open,
+        "data-state": contentState.open ? "open" : "closed",
+        "data-instant": dataAttr(contentState.instant),
         role: hasAriaLabel ? void 0 : "tooltip",
         id: hasAriaLabel ? void 0 : contentId,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
         onPointerEnter() {
-          send({ type: "content.pointer.move" });
-        },
-        onPointerLeave() {
-          send({ type: "content.pointer.leave" });
+          send({ type: "CONTENT_POINTER_MOVE" });
         },
         style: {
           pointerEvents: prop("interactive") ? "auto" : "none"

package/dist/tooltip.machine.js

@@ -37,6 +37,7 @@ var import_core = require("@zag-js/core");
 var import_dom_query = require("@zag-js/dom-query");
 var import_focus_visible = require("@zag-js/focus-visible");
 var import_popper = require("@zag-js/popper");
+var import_safe_area = require("@zag-js/safe-area");
 var import_utils = require("@zag-js/utils");
 var dom = __toESM(require("./tooltip.dom.js"));
 var import_tooltip = require("./tooltip.store.js");
@@ -70,6 +71,7 @@ var machine = (0, import_core.createMachine)({
   context: ({ bindable, prop, scope }) => ({
     currentPlacement: bindable(() => ({ defaultValue: void 0 })),
     hasPointerMoveOpened: bindable(() => ({ defaultValue: null })),
+    isPointer: bindable(() => ({ defaultValue: false })),
     triggerValue: bindable(() => ({
       defaultValue: prop("defaultTriggerValue") ?? null,
       value: prop("triggerValue"),
@@ -79,8 +81,7 @@ var machine = (0, import_core.createMachine)({
         const triggerElement = dom.getActiveTriggerEl(scope, value);
         onTriggerValueChange({ value, triggerElement });
       }
-    })),
-    positioned: bindable(() => ({ defaultValue: false }))
+    }))
   }),
   watch({ track, action, prop }) {
     track([() => prop("disabled")], () => {
@@ -94,18 +95,18 @@ var machine = (0, import_core.createMachine)({
     });
   },
   on: {
-    "triggerValue.set": {
+    "TRIGGER_VALUE.SET": {
       actions: ["setTriggerValue", "repositionImmediate"]
     }
   },
   states: {
     closed: {
-      entry: ["clearGlobalId"],
+      entry: ["clearGlobalId", "clearIsPointer"],
       on: {
-        "controlled.open": {
+        "CONTROLLED.OPEN": {
           target: "open"
         },
-        open: [
+        OPEN: [
           {
             guard: "isOpenControlled",
             actions: ["setTriggerValue", "invokeOnOpen"]
@@ -115,10 +116,10 @@ var machine = (0, import_core.createMachine)({
             actions: ["setTriggerValue", "invokeOnOpen"]
           }
         ],
-        "pointer.leave": {
+        POINTER_LEAVE: {
           actions: ["clearPointerMoveOpened"]
         },
-        "pointer.move": [
+        POINTER_MOVE: [
           {
             guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
             target: "opening",
@@ -127,7 +128,7 @@ var machine = (0, import_core.createMachine)({
           {
             guard: not("hasPointerMoveOpened"),
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen", "setTriggerValue"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "invokeOnOpen", "setTriggerValue"]
           }
         ]
       }
@@ -135,23 +136,23 @@ var machine = (0, import_core.createMachine)({
     opening: {
       effects: ["trackScroll", "trackPointerlockChange", "waitForOpenDelay"],
       on: {
-        "after.openDelay": [
+        OPEN_DELAY: [
           {
             guard: "isOpenControlled",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "invokeOnOpen"]
           }
         ],
-        "controlled.open": {
+        "CONTROLLED.OPEN": {
           target: "open"
         },
-        "controlled.close": {
+        "CONTROLLED.CLOSE": {
           target: "closed"
         },
-        open: [
+        OPEN: [
           {
             guard: "isOpenControlled",
             actions: ["setTriggerValue", "invokeOnOpen"]
@@ -161,7 +162,7 @@ var machine = (0, import_core.createMachine)({
             actions: ["setTriggerValue", "invokeOnOpen"]
           }
         ],
-        "pointer.leave": [
+        POINTER_LEAVE: [
           {
             guard: "isOpenControlled",
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
@@ -172,7 +173,7 @@ var machine = (0, import_core.createMachine)({
             actions: ["clearPointerMoveOpened", "invokeOnClose"]
           }
         ],
-        close: [
+        CLOSE: [
           {
             guard: "isOpenControlled",
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
@@ -186,13 +187,13 @@ var machine = (0, import_core.createMachine)({
       }
     },
     open: {
-      effects: ["trackEscapeKey", "trackScroll", "trackPointerlockChange", "trackPositioning"],
+      effects: ["trackEscapeKey", "trackScroll", "trackPointerlockChange", "trackPositioning", "trackSafeArea"],
       entry: ["setGlobalId"],
       on: {
-        "controlled.close": {
+        "CONTROLLED.CLOSE": {
           target: "closed"
         },
-        close: [
+        CLOSE: [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnClose"]
@@ -202,30 +203,34 @@ var machine = (0, import_core.createMachine)({
             actions: ["invokeOnClose"]
           }
         ],
-        "pointer.leave": [
+        // Hoverable content means the pointer may be travelling to it (WCAG 1.4.13), so the
+        // safe area decides when it has really left.
+        POINTER_LEAVE: [
           {
-            guard: "isVisible",
+            guard: and(not("isInteractive"), "isVisible"),
             target: "closing",
             actions: ["clearPointerMoveOpened"]
           },
           // == group ==
           {
-            guard: "isOpenControlled",
+            guard: and(not("isInteractive"), "isOpenControlled"),
             actions: ["clearPointerMoveOpened", "invokeOnClose"]
           },
           {
+            guard: not("isInteractive"),
             target: "closed",
             actions: ["clearPointerMoveOpened", "invokeOnClose"]
           }
         ],
-        "content.pointer.leave": {
-          guard: "isInteractive",
-          target: "closing"
+        "SAFE_AREA.EXIT": {
+          target: "closing",
+          // Same bookkeeping the `POINTER_LEAVE` path does, or `closed` refuses the next hover.
+          actions: ["clearPointerMoveOpened"]
         },
-        "positioning.set": {
+        "POSITIONING.SET": {
           actions: ["reposition"]
         },
-        "triggerValue.set": {
+        "TRIGGER_VALUE.SET": {
           // Transition to closing (which cleans up trackPositioning) then immediately back to open
           // This re-creates the positioning effect with the new trigger
           target: "closing",
@@ -236,7 +241,7 @@ var machine = (0, import_core.createMachine)({
     closing: {
       effects: ["trackPositioning", "waitForCloseDelay"],
       on: {
-        "after.closeDelay": [
+        CLOSE_DELAY: [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnClose"]
@@ -246,13 +251,13 @@ var machine = (0, import_core.createMachine)({
             actions: ["invokeOnClose"]
           }
         ],
-        "controlled.close": {
+        "CONTROLLED.CLOSE": {
           target: "closed"
         },
-        "controlled.open": {
+        "CONTROLLED.OPEN": {
           target: "open"
         },
-        close: [
+        CLOSE: [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnClose"]
@@ -262,29 +267,29 @@ var machine = (0, import_core.createMachine)({
             actions: ["invokeOnClose"]
           }
         ],
-        "pointer.move": [
+        POINTER_MOVE: [
           {
             guard: "isOpenControlled",
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
-            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen", "toggleVisibility"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "setTriggerValue", "invokeOnOpen", "toggleVisibility"]
           },
           {
             target: "open",
-            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "setTriggerValue", "invokeOnOpen"]
           }
         ],
-        "triggerValue.set": {
+        "TRIGGER_VALUE.SET": {
           target: "open",
           actions: ["setTriggerValue", "repositionImmediate"]
         },
-        reopen: {
+        REOPEN: {
           target: "open"
         },
-        "content.pointer.move": {
+        CONTENT_POINTER_MOVE: {
           guard: "isInteractive",
           target: "open"
         },
-        "positioning.set": {
+        "POSITIONING.SET": {
           actions: ["reposition"]
         }
       }
@@ -299,10 +304,10 @@ var machine = (0, import_core.createMachine)({
       isOpenControlled: ({ prop }) => prop("open") !== void 0
     },
     actions: {
-      setGlobalId: ({ prop }) => {
+      setGlobalId: ({ prop, event }) => {
         const prevId = import_tooltip.store.get("id");
-        const isInstant = prevId !== null && prevId !== prop("id");
-        import_tooltip.store.update({ id: prop("id"), prevId: isInstant ? prevId : null, instant: isInstant });
+        const isInstant = event.src === "trigger.focus" || prevId !== null && prevId !== prop("id");
+        import_tooltip.store.update({ id: prop("id"), prevId: isInstant && prevId !== null ? prevId : null, instant: isInstant });
       },
       clearGlobalId: ({ prop }) => {
         if (prop("id") === import_tooltip.store.get("id")) {
@@ -317,10 +322,10 @@ var machine = (0, import_core.createMachine)({
       },
       closeIfDisabled: ({ prop, send }) => {
         if (!prop("disabled")) return;
-        send({ type: "close", src: "disabled.change" });
+        send({ type: "CLOSE", src: "disabled.change" });
       },
       reposition: ({ context, event, prop, scope }) => {
-        if (event.type !== "positioning.set") return;
+        if (event.type !== "POSITIONING.SET") return;
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
         const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
         (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
@@ -346,7 +351,7 @@ var machine = (0, import_core.createMachine)({
       toggleVisibility: ({ prop, event, send }) => {
         queueMicrotask(() => {
           send({
-            type: prop("open") ? "controlled.open" : "controlled.close",
+            type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
             previousEvent: event
           });
         });
@@ -358,13 +363,19 @@ var machine = (0, import_core.createMachine)({
       clearPointerMoveOpened: ({ context }) => {
         context.set("hasPointerMoveOpened", null);
       },
+      setIsPointer: ({ context }) => {
+        context.set("isPointer", true);
+      },
+      clearIsPointer: ({ context }) => {
+        context.set("isPointer", false);
+      },
       setTriggerValue: ({ context, event }) => {
         if (event.value === void 0) return;
         context.set("triggerValue", event.value);
       },
       immediateReopen: ({ send }) => {
         queueMicrotask(() => {
-          send({ type: "reopen" });
+          send({ type: "REOPEN" });
         });
       }
     },
@@ -372,6 +383,20 @@ var machine = (0, import_core.createMachine)({
       trackFocusVisible: ({ scope }) => {
         return (0, import_focus_visible.trackFocusVisible)({ root: scope.getRootNode?.() });
       },
+      // Only when hoverable: with `interactive: false` the content has `pointer-events: none`,
+      // so there is no journey to protect and its rect is unreachable.
+      trackSafeArea: ({ send, prop, scope, context }) => {
+        if (!prop("interactive")) return;
+        return (0, import_safe_area.trackSafeArea)({
+          getTriggerEl: () => dom.getActiveTriggerEl(scope, context.get("triggerValue")),
+          getContentEl: () => dom.getContentEl(scope),
+          openedByPointer: () => context.get("isPointer"),
+          defer: true,
+          onLeave() {
+            send({ type: "SAFE_AREA.EXIT" });
+          }
+        });
+      },
       trackPositioning: ({ context, prop, scope }) => {
         if (!context.get("currentPlacement")) {
           context.set("currentPlacement", prop("positioning").placement);
@@ -383,13 +408,12 @@ var machine = (0, import_core.createMachine)({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
       trackPointerlockChange: ({ send, scope }) => {
         const doc = scope.getDoc();
-        const onChange = () => send({ type: "close", src: "pointerlock:change" });
+        const onChange = () => send({ type: "CLOSE", src: "pointerlock:change" });
         return (0, import_dom_query.addDomEvent)(doc, "pointerlockchange", onChange, false);
       },
       trackScroll: ({ send, prop, scope, context }) => {
@@ -400,7 +424,7 @@ var machine = (0, import_core.createMachine)({
         const overflowParents = (0, import_dom_query.getOverflowAncestors)(triggerEl);
         const cleanups = overflowParents.map((overflowParent) => {
           const onScroll = () => {
-            send({ type: "close", src: "scroll" });
+            send({ type: "CLOSE", src: "scroll" });
           };
           return (0, import_dom_query.addDomEvent)(overflowParent, "scroll", onScroll, {
             passive: true,
@@ -415,8 +439,9 @@ var machine = (0, import_core.createMachine)({
         let cleanup;
         queueMicrotask(() => {
           cleanup = import_tooltip.store.subscribe(() => {
-            if (import_tooltip.store.get("id") !== prop("id")) {
-              send({ type: "close", src: "id.change" });
+            const id = import_tooltip.store.get("id");
+            if (id !== null && id !== prop("id")) {
+              send({ type: "CLOSE", src: "id.change" });
             }
           });
         });
@@ -428,19 +453,19 @@ var machine = (0, import_core.createMachine)({
           if ((0, import_dom_query.isComposingEvent)(event)) return;
           if (event.key !== "Escape") return;
           event.stopPropagation();
-          send({ type: "close", src: "keydown.escape" });
+          send({ type: "CLOSE", src: "keydown.escape" });
         };
         return (0, import_dom_query.addDomEvent)(document, "keydown", onKeyDown, true);
       },
       waitForOpenDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.openDelay", previousEvent: event });
+          send({ type: "OPEN_DELAY", previousEvent: event });
         }, prop("openDelay"));
         return () => clearTimeout(id);
       },
       waitForCloseDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.closeDelay", previousEvent: event });
+          send({ type: "CLOSE_DELAY", previousEvent: event });
         }, prop("closeDelay"));
         return () => clearTimeout(id);
       }

package/dist/tooltip.machine.mjs

@@ -3,6 +3,7 @@ import { createGuards, createMachine } from "@zag-js/core";
 import { addDomEvent, getOverflowAncestors, isComposingEvent } from "@zag-js/dom-query";
 import { trackFocusVisible } from "@zag-js/focus-visible";
 import { getPlacement } from "@zag-js/popper";
+import { trackSafeArea } from "@zag-js/safe-area";
 import { ensureProps } from "@zag-js/utils";
 import * as dom from "./tooltip.dom.mjs";
 import { store } from "./tooltip.store.mjs";
@@ -36,6 +37,7 @@ var machine = createMachine({
   context: ({ bindable, prop, scope }) => ({
     currentPlacement: bindable(() => ({ defaultValue: void 0 })),
     hasPointerMoveOpened: bindable(() => ({ defaultValue: null })),
+    isPointer: bindable(() => ({ defaultValue: false })),
     triggerValue: bindable(() => ({
       defaultValue: prop("defaultTriggerValue") ?? null,
       value: prop("triggerValue"),
@@ -45,8 +47,7 @@ var machine = createMachine({
         const triggerElement = dom.getActiveTriggerEl(scope, value);
         onTriggerValueChange({ value, triggerElement });
       }
-    })),
-    positioned: bindable(() => ({ defaultValue: false }))
+    }))
   }),
   watch({ track, action, prop }) {
     track([() => prop("disabled")], () => {
@@ -60,18 +61,18 @@ var machine = createMachine({
     });
   },
   on: {
-    "triggerValue.set": {
+    "TRIGGER_VALUE.SET": {
       actions: ["setTriggerValue", "repositionImmediate"]
     }
   },
   states: {
     closed: {
-      entry: ["clearGlobalId"],
+      entry: ["clearGlobalId", "clearIsPointer"],
       on: {
-        "controlled.open": {
+        "CONTROLLED.OPEN": {
           target: "open"
         },
-        open: [
+        OPEN: [
           {
             guard: "isOpenControlled",
             actions: ["setTriggerValue", "invokeOnOpen"]
@@ -81,10 +82,10 @@ var machine = createMachine({
             actions: ["setTriggerValue", "invokeOnOpen"]
           }
         ],
-        "pointer.leave": {
+        POINTER_LEAVE: {
           actions: ["clearPointerMoveOpened"]
         },
-        "pointer.move": [
+        POINTER_MOVE: [
           {
             guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
             target: "opening",
@@ -93,7 +94,7 @@ var machine = createMachine({
           {
             guard: not("hasPointerMoveOpened"),
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen", "setTriggerValue"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "invokeOnOpen", "setTriggerValue"]
           }
         ]
       }
@@ -101,23 +102,23 @@ var machine = createMachine({
     opening: {
       effects: ["trackScroll", "trackPointerlockChange", "waitForOpenDelay"],
       on: {
-        "after.openDelay": [
+        OPEN_DELAY: [
           {
             guard: "isOpenControlled",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "invokeOnOpen"]
           }
         ],
-        "controlled.open": {
+        "CONTROLLED.OPEN": {
           target: "open"
         },
-        "controlled.close": {
+        "CONTROLLED.CLOSE": {
           target: "closed"
         },
-        open: [
+        OPEN: [
           {
             guard: "isOpenControlled",
             actions: ["setTriggerValue", "invokeOnOpen"]
@@ -127,7 +128,7 @@ var machine = createMachine({
             actions: ["setTriggerValue", "invokeOnOpen"]
           }
         ],
-        "pointer.leave": [
+        POINTER_LEAVE: [
           {
             guard: "isOpenControlled",
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
@@ -138,7 +139,7 @@ var machine = createMachine({
             actions: ["clearPointerMoveOpened", "invokeOnClose"]
           }
         ],
-        close: [
+        CLOSE: [
           {
             guard: "isOpenControlled",
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
@@ -152,13 +153,13 @@ var machine = createMachine({
       }
     },
     open: {
-      effects: ["trackEscapeKey", "trackScroll", "trackPointerlockChange", "trackPositioning"],
+      effects: ["trackEscapeKey", "trackScroll", "trackPointerlockChange", "trackPositioning", "trackSafeArea"],
       entry: ["setGlobalId"],
       on: {
-        "controlled.close": {
+        "CONTROLLED.CLOSE": {
           target: "closed"
         },
-        close: [
+        CLOSE: [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnClose"]
@@ -168,30 +169,34 @@ var machine = createMachine({
             actions: ["invokeOnClose"]
           }
         ],
-        "pointer.leave": [
+        // Hoverable content means the pointer may be travelling to it (WCAG 1.4.13), so the
+        // safe area decides when it has really left.
+        POINTER_LEAVE: [
           {
-            guard: "isVisible",
+            guard: and(not("isInteractive"), "isVisible"),
             target: "closing",
             actions: ["clearPointerMoveOpened"]
           },
           // == group ==
           {
-            guard: "isOpenControlled",
+            guard: and(not("isInteractive"), "isOpenControlled"),
             actions: ["clearPointerMoveOpened", "invokeOnClose"]
           },
           {
+            guard: not("isInteractive"),
             target: "closed",
             actions: ["clearPointerMoveOpened", "invokeOnClose"]
           }
         ],
-        "content.pointer.leave": {
-          guard: "isInteractive",
-          target: "closing"
+        "SAFE_AREA.EXIT": {
+          target: "closing",
+          // Same bookkeeping the `POINTER_LEAVE` path does, or `closed` refuses the next hover.
+          actions: ["clearPointerMoveOpened"]
         },
-        "positioning.set": {
+        "POSITIONING.SET": {
           actions: ["reposition"]
         },
-        "triggerValue.set": {
+        "TRIGGER_VALUE.SET": {
           // Transition to closing (which cleans up trackPositioning) then immediately back to open
           // This re-creates the positioning effect with the new trigger
           target: "closing",
@@ -202,7 +207,7 @@ var machine = createMachine({
     closing: {
       effects: ["trackPositioning", "waitForCloseDelay"],
       on: {
-        "after.closeDelay": [
+        CLOSE_DELAY: [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnClose"]
@@ -212,13 +217,13 @@ var machine = createMachine({
             actions: ["invokeOnClose"]
           }
         ],
-        "controlled.close": {
+        "CONTROLLED.CLOSE": {
           target: "closed"
         },
-        "controlled.open": {
+        "CONTROLLED.OPEN": {
           target: "open"
         },
-        close: [
+        CLOSE: [
           {
             guard: "isOpenControlled",
             actions: ["invokeOnClose"]
@@ -228,29 +233,29 @@ var machine = createMachine({
             actions: ["invokeOnClose"]
           }
         ],
-        "pointer.move": [
+        POINTER_MOVE: [
           {
             guard: "isOpenControlled",
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
-            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen", "toggleVisibility"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "setTriggerValue", "invokeOnOpen", "toggleVisibility"]
           },
           {
             target: "open",
-            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setIsPointer", "setTriggerValue", "invokeOnOpen"]
           }
         ],
-        "triggerValue.set": {
+        "TRIGGER_VALUE.SET": {
           target: "open",
           actions: ["setTriggerValue", "repositionImmediate"]
         },
-        reopen: {
+        REOPEN: {
           target: "open"
         },
-        "content.pointer.move": {
+        CONTENT_POINTER_MOVE: {
           guard: "isInteractive",
           target: "open"
         },
-        "positioning.set": {
+        "POSITIONING.SET": {
           actions: ["reposition"]
         }
       }
@@ -265,10 +270,10 @@ var machine = createMachine({
       isOpenControlled: ({ prop }) => prop("open") !== void 0
     },
     actions: {
-      setGlobalId: ({ prop }) => {
+      setGlobalId: ({ prop, event }) => {
         const prevId = store.get("id");
-        const isInstant = prevId !== null && prevId !== prop("id");
-        store.update({ id: prop("id"), prevId: isInstant ? prevId : null, instant: isInstant });
+        const isInstant = event.src === "trigger.focus" || prevId !== null && prevId !== prop("id");
+        store.update({ id: prop("id"), prevId: isInstant && prevId !== null ? prevId : null, instant: isInstant });
       },
       clearGlobalId: ({ prop }) => {
         if (prop("id") === store.get("id")) {
@@ -283,10 +288,10 @@ var machine = createMachine({
       },
       closeIfDisabled: ({ prop, send }) => {
         if (!prop("disabled")) return;
-        send({ type: "close", src: "disabled.change" });
+        send({ type: "CLOSE", src: "disabled.change" });
       },
       reposition: ({ context, event, prop, scope }) => {
-        if (event.type !== "positioning.set") return;
+        if (event.type !== "POSITIONING.SET") return;
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
         const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
         getPlacement(getTriggerEl, getPositionerEl2, {
@@ -312,7 +317,7 @@ var machine = createMachine({
       toggleVisibility: ({ prop, event, send }) => {
         queueMicrotask(() => {
           send({
-            type: prop("open") ? "controlled.open" : "controlled.close",
+            type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
             previousEvent: event
           });
         });
@@ -324,13 +329,19 @@ var machine = createMachine({
       clearPointerMoveOpened: ({ context }) => {
         context.set("hasPointerMoveOpened", null);
       },
+      setIsPointer: ({ context }) => {
+        context.set("isPointer", true);
+      },
+      clearIsPointer: ({ context }) => {
+        context.set("isPointer", false);
+      },
       setTriggerValue: ({ context, event }) => {
         if (event.value === void 0) return;
         context.set("triggerValue", event.value);
       },
       immediateReopen: ({ send }) => {
         queueMicrotask(() => {
-          send({ type: "reopen" });
+          send({ type: "REOPEN" });
         });
       }
     },
@@ -338,6 +349,20 @@ var machine = createMachine({
       trackFocusVisible: ({ scope }) => {
         return trackFocusVisible({ root: scope.getRootNode?.() });
       },
+      // Only when hoverable: with `interactive: false` the content has `pointer-events: none`,
+      // so there is no journey to protect and its rect is unreachable.
+      trackSafeArea: ({ send, prop, scope, context }) => {
+        if (!prop("interactive")) return;
+        return trackSafeArea({
+          getTriggerEl: () => dom.getActiveTriggerEl(scope, context.get("triggerValue")),
+          getContentEl: () => dom.getContentEl(scope),
+          openedByPointer: () => context.get("isPointer"),
+          defer: true,
+          onLeave() {
+            send({ type: "SAFE_AREA.EXIT" });
+          }
+        });
+      },
       trackPositioning: ({ context, prop, scope }) => {
         if (!context.get("currentPlacement")) {
           context.set("currentPlacement", prop("positioning").placement);
@@ -349,13 +374,12 @@ var machine = createMachine({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
       trackPointerlockChange: ({ send, scope }) => {
         const doc = scope.getDoc();
-        const onChange = () => send({ type: "close", src: "pointerlock:change" });
+        const onChange = () => send({ type: "CLOSE", src: "pointerlock:change" });
         return addDomEvent(doc, "pointerlockchange", onChange, false);
       },
       trackScroll: ({ send, prop, scope, context }) => {
@@ -366,7 +390,7 @@ var machine = createMachine({
         const overflowParents = getOverflowAncestors(triggerEl);
         const cleanups = overflowParents.map((overflowParent) => {
           const onScroll = () => {
-            send({ type: "close", src: "scroll" });
+            send({ type: "CLOSE", src: "scroll" });
           };
           return addDomEvent(overflowParent, "scroll", onScroll, {
             passive: true,
@@ -381,8 +405,9 @@ var machine = createMachine({
         let cleanup;
         queueMicrotask(() => {
           cleanup = store.subscribe(() => {
-            if (store.get("id") !== prop("id")) {
-              send({ type: "close", src: "id.change" });
+            const id = store.get("id");
+            if (id !== null && id !== prop("id")) {
+              send({ type: "CLOSE", src: "id.change" });
             }
           });
         });
@@ -394,19 +419,19 @@ var machine = createMachine({
           if (isComposingEvent(event)) return;
           if (event.key !== "Escape") return;
           event.stopPropagation();
-          send({ type: "close", src: "keydown.escape" });
+          send({ type: "CLOSE", src: "keydown.escape" });
         };
         return addDomEvent(document, "keydown", onKeyDown, true);
       },
       waitForOpenDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.openDelay", previousEvent: event });
+          send({ type: "OPEN_DELAY", previousEvent: event });
         }, prop("openDelay"));
         return () => clearTimeout(id);
       },
       waitForCloseDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.closeDelay", previousEvent: event });
+          send({ type: "CLOSE_DELAY", previousEvent: event });
         }, prop("closeDelay"));
         return () => clearTimeout(id);
       }

package/dist/tooltip.types.d.mts

@@ -1,7 +1,7 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PositioningOptions, Placement } from '@zag-js/popper';
+import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+import { PropTypes, DirectionProperty, CommonProperties } from '@zag-js/types';
 
 interface OpenChangeDetails {
     open: boolean;
@@ -16,12 +16,12 @@ interface TriggerValueChangeDetails {
      */
     triggerElement: HTMLElement | null;
 }
-type ElementIds = Partial<{
-    trigger: string | ((value?: string) => string);
-    content: string;
-    arrow: string;
-    positioner: string;
-}>;
+interface ElementIds {
+    trigger?: (string | ((value?: string) => string)) | undefined;
+    content?: string | undefined;
+    arrow?: string | undefined;
+    positioner?: string | undefined;
+}
 interface TooltipProps extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the tooltip. Useful for composition.
@@ -107,12 +107,13 @@ interface TooltipProps extends DirectionProperty, CommonProperties {
 type PropsWithDefault = "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "closeOnScroll" | "closeOnClick" | "interactive" | "id" | "positioning";
 interface TooltipSchema {
     state: "open" | "closed" | "opening" | "closing";
-    props: RequiredBy<TooltipProps, PropsWithDefault>;
+    props: TooltipProps;
+    defaultPropKey: PropsWithDefault;
     context: {
         currentPlacement: Placement | undefined;
         hasPointerMoveOpened: string | null;
+        isPointer: boolean;
         triggerValue: string | null;
-        positioned: boolean;
     };
     event: EventObject;
     action: string;
@@ -127,6 +128,38 @@ interface TriggerProps {
      */
     value?: string;
 }
+interface TriggerState {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value: string | undefined;
+    /**
+     * Whether this trigger is the one that opened the tooltip
+     */
+    current: boolean;
+    /**
+     * Whether the tooltip is open
+     */
+    open: boolean;
+}
+interface ContentState {
+    /**
+     * Whether the tooltip is open
+     */
+    open: boolean;
+    /**
+     * Whether the tooltip should skip its enter animation, following a rapid switch between triggers
+     */
+    instant: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
 interface TooltipApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the tooltip is open.
@@ -148,11 +181,19 @@ interface TooltipApi<T extends PropTypes = PropTypes> {
      * Function to reposition the popover
      */
     reposition: (options?: Partial<PositioningOptions>) => void;
+    /**
+     * Returns the state of a specific trigger, including whether it's the currently active one
+     */
+    getTriggerState: (props?: TriggerProps) => TriggerState;
     getTriggerProps: (props?: TriggerProps) => T["button"];
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
 }
 
-export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerValueChangeDetails };
+export type { ContentState, ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerState, TriggerValueChangeDetails };

package/dist/tooltip.types.d.ts

@@ -1,7 +1,7 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PositioningOptions, Placement } from '@zag-js/popper';
+import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+import { PropTypes, DirectionProperty, CommonProperties } from '@zag-js/types';
 
 interface OpenChangeDetails {
     open: boolean;
@@ -16,12 +16,12 @@ interface TriggerValueChangeDetails {
      */
     triggerElement: HTMLElement | null;
 }
-type ElementIds = Partial<{
-    trigger: string | ((value?: string) => string);
-    content: string;
-    arrow: string;
-    positioner: string;
-}>;
+interface ElementIds {
+    trigger?: (string | ((value?: string) => string)) | undefined;
+    content?: string | undefined;
+    arrow?: string | undefined;
+    positioner?: string | undefined;
+}
 interface TooltipProps extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the tooltip. Useful for composition.
@@ -107,12 +107,13 @@ interface TooltipProps extends DirectionProperty, CommonProperties {
 type PropsWithDefault = "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "closeOnScroll" | "closeOnClick" | "interactive" | "id" | "positioning";
 interface TooltipSchema {
     state: "open" | "closed" | "opening" | "closing";
-    props: RequiredBy<TooltipProps, PropsWithDefault>;
+    props: TooltipProps;
+    defaultPropKey: PropsWithDefault;
     context: {
         currentPlacement: Placement | undefined;
         hasPointerMoveOpened: string | null;
+        isPointer: boolean;
         triggerValue: string | null;
-        positioned: boolean;
     };
     event: EventObject;
     action: string;
@@ -127,6 +128,38 @@ interface TriggerProps {
      */
     value?: string;
 }
+interface TriggerState {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value: string | undefined;
+    /**
+     * Whether this trigger is the one that opened the tooltip
+     */
+    current: boolean;
+    /**
+     * Whether the tooltip is open
+     */
+    open: boolean;
+}
+interface ContentState {
+    /**
+     * Whether the tooltip is open
+     */
+    open: boolean;
+    /**
+     * Whether the tooltip should skip its enter animation, following a rapid switch between triggers
+     */
+    instant: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
 interface TooltipApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the tooltip is open.
@@ -148,11 +181,19 @@ interface TooltipApi<T extends PropTypes = PropTypes> {
      * Function to reposition the popover
      */
     reposition: (options?: Partial<PositioningOptions>) => void;
+    /**
+     * Returns the state of a specific trigger, including whether it's the currently active one
+     */
+    getTriggerState: (props?: TriggerProps) => TriggerState;
     getTriggerProps: (props?: TriggerProps) => T["button"];
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
 }
 
-export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerValueChangeDetails };
+export type { ContentState, ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerState, TriggerValueChangeDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tooltip",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.2",
   "description": "Core logic for the tooltip widget implemented as a state machine",
   "keywords": [
     "js",
@@ -14,7 +14,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/tooltip",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/tooltip"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -26,13 +29,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "2.0.0-next.0",
-    "@zag-js/core": "2.0.0-next.0",
-    "@zag-js/popper": "2.0.0-next.0",
-    "@zag-js/focus-visible": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0",
-    "@zag-js/types": "2.0.0-next.0"
+    "@zag-js/anatomy": "2.0.0-next.2",
+    "@zag-js/core": "2.0.0-next.2",
+    "@zag-js/dom-query": "2.0.0-next.2",
+    "@zag-js/focus-visible": "2.0.0-next.2",
+    "@zag-js/popper": "2.0.0-next.2",
+    "@zag-js/safe-area": "2.0.0-next.2",
+    "@zag-js/types": "2.0.0-next.2",
+    "@zag-js/utils": "2.0.0-next.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -66,7 +70,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "typecheck": "tsc --noEmit"
   }
 }