@zag-js/tooltip 1.38.1 → 1.39.0

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 } from './tooltip.types.mjs';
+export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, 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 } from './tooltip.types.js';
+export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, 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

@@ -44,7 +44,7 @@ function connect(service, normalize) {
   const id = prop("id");
   const hasAriaLabel = !!prop("aria-label");
   const open = state.matches("open", "closing");
-  const triggerId = dom.getTriggerId(scope);
+  const triggerValue = context.get("triggerValue");
   const contentId = dom.getContentId(scope);
   const disabled = prop("disabled");
   const popperStyles = (0, import_popper.getPlacementStyles)({
@@ -58,13 +58,23 @@ function connect(service, normalize) {
       if (open2 === nextOpen) return;
       send({ type: nextOpen ? "open" : "close" });
     },
+    triggerValue,
+    setTriggerValue(value) {
+      send({ type: "triggerValue.set", value: value ?? void 0 });
+    },
     reposition(options = {}) {
       send({ type: "positioning.set", options });
     },
-    getTriggerProps() {
+    getTriggerProps(props = {}) {
+      const { value } = props;
+      const current = value == null ? false : triggerValue === value;
+      const triggerId = dom.getTriggerId(scope, value);
       return normalize.button({
         ...import_tooltip.parts.trigger.attrs,
         id: triggerId,
+        "data-ownedby": scope.id,
+        "data-value": value,
+        "data-current": (0, import_dom_query.dataAttr)(current),
         dir: prop("dir"),
         "data-expanded": (0, import_dom_query.dataAttr)(open),
         "data-state": open ? "open" : "closed",
@@ -73,22 +83,24 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (!prop("closeOnClick")) return;
-          send({ type: "close", src: "trigger.click" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "close", src: "trigger.click", value, triggerId });
         },
         onFocus(event) {
-          queueMicrotask(() => {
-            if (event.defaultPrevented) return;
-            if (disabled) return;
-            if (_event.src === "trigger.pointerdown") return;
-            if (!(0, import_focus_visible.isFocusVisible)()) return;
-            send({ type: "open", src: "trigger.focus" });
-          });
+          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 });
         },
         onBlur(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
-          if (id === import_tooltip2.store.get("id")) {
-            send({ type: "close", src: "trigger.blur" });
+          if (id !== import_tooltip2.store.get("id")) return;
+          const activeEl = event.relatedTarget ?? scope.getDoc().activeElement;
+          const focusedAnotherTrigger = activeEl?.closest(`[data-ownedby="${scope.id}"]`) != null;
+          if (!focusedAnotherTrigger) {
+            send({ type: "close", src: "trigger.blur", value, triggerId });
           }
         },
         onPointerDown(event) {
@@ -97,20 +109,21 @@ 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" });
+            send({ type: "close", src: "trigger.pointerdown", value, triggerId });
           }
         },
         onPointerMove(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "pointer.move", value, triggerId });
         },
         onPointerOver(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move" });
+          send({ type: "pointer.move", value, triggerId });
         },
         onPointerLeave() {
           if (disabled) return;

package/dist/tooltip.connect.mjs

@@ -10,7 +10,7 @@ function connect(service, normalize) {
   const id = prop("id");
   const hasAriaLabel = !!prop("aria-label");
   const open = state.matches("open", "closing");
-  const triggerId = dom.getTriggerId(scope);
+  const triggerValue = context.get("triggerValue");
   const contentId = dom.getContentId(scope);
   const disabled = prop("disabled");
   const popperStyles = getPlacementStyles({
@@ -24,13 +24,23 @@ function connect(service, normalize) {
       if (open2 === nextOpen) return;
       send({ type: nextOpen ? "open" : "close" });
     },
+    triggerValue,
+    setTriggerValue(value) {
+      send({ type: "triggerValue.set", value: value ?? void 0 });
+    },
     reposition(options = {}) {
       send({ type: "positioning.set", options });
     },
-    getTriggerProps() {
+    getTriggerProps(props = {}) {
+      const { value } = props;
+      const current = value == null ? false : triggerValue === value;
+      const triggerId = dom.getTriggerId(scope, value);
       return normalize.button({
         ...parts.trigger.attrs,
         id: triggerId,
+        "data-ownedby": scope.id,
+        "data-value": value,
+        "data-current": dataAttr(current),
         dir: prop("dir"),
         "data-expanded": dataAttr(open),
         "data-state": open ? "open" : "closed",
@@ -39,22 +49,24 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (!prop("closeOnClick")) return;
-          send({ type: "close", src: "trigger.click" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "close", src: "trigger.click", value, triggerId });
         },
         onFocus(event) {
-          queueMicrotask(() => {
-            if (event.defaultPrevented) return;
-            if (disabled) return;
-            if (_event.src === "trigger.pointerdown") return;
-            if (!isFocusVisible()) return;
-            send({ type: "open", src: "trigger.focus" });
-          });
+          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 });
         },
         onBlur(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
-          if (id === store.get("id")) {
-            send({ type: "close", src: "trigger.blur" });
+          if (id !== store.get("id")) return;
+          const activeEl = event.relatedTarget ?? scope.getDoc().activeElement;
+          const focusedAnotherTrigger = activeEl?.closest(`[data-ownedby="${scope.id}"]`) != null;
+          if (!focusedAnotherTrigger) {
+            send({ type: "close", src: "trigger.blur", value, triggerId });
           }
         },
         onPointerDown(event) {
@@ -63,20 +75,21 @@ function connect(service, normalize) {
           if (!isLeftClick(event)) return;
           if (!prop("closeOnPointerDown")) return;
           if (id === store.get("id")) {
-            send({ type: "close", src: "trigger.pointerdown" });
+            send({ type: "close", src: "trigger.pointerdown", value, triggerId });
           }
         },
         onPointerMove(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "pointer.move", value, triggerId });
         },
         onPointerOver(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move" });
+          send({ type: "pointer.move", value, triggerId });
         },
         onPointerLeave() {
           if (disabled) return;

package/dist/tooltip.dom.d.mts

@@ -1,6 +1,6 @@
 import { Scope } from '@zag-js/core';
 
-declare const getTriggerId: (scope: Scope) => any;
+declare const getTriggerId: (scope: Scope, value?: string) => any;
 declare const getContentId: (scope: Scope) => any;
 declare const getArrowId: (scope: Scope) => any;
 declare const getPositionerId: (scope: Scope) => any;
@@ -8,5 +8,7 @@ declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
 declare const getContentEl: (scope: Scope) => HTMLElement | null;
 declare const getPositionerEl: (scope: Scope) => HTMLElement | null;
 declare const getArrowEl: (scope: Scope) => HTMLElement | null;
+declare const getTriggerEls: (scope: Scope) => HTMLElement[];
+declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 
-export { getArrowEl, getArrowId, getContentEl, getContentId, getPositionerEl, getPositionerId, getTriggerEl, getTriggerId };
+export { getActiveTriggerEl, getArrowEl, getArrowId, getContentEl, getContentId, getPositionerEl, getPositionerId, getTriggerEl, getTriggerEls, getTriggerId };

package/dist/tooltip.dom.d.ts

@@ -1,6 +1,6 @@
 import { Scope } from '@zag-js/core';
 
-declare const getTriggerId: (scope: Scope) => any;
+declare const getTriggerId: (scope: Scope, value?: string) => any;
 declare const getContentId: (scope: Scope) => any;
 declare const getArrowId: (scope: Scope) => any;
 declare const getPositionerId: (scope: Scope) => any;
@@ -8,5 +8,7 @@ declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
 declare const getContentEl: (scope: Scope) => HTMLElement | null;
 declare const getPositionerEl: (scope: Scope) => HTMLElement | null;
 declare const getArrowEl: (scope: Scope) => HTMLElement | null;
+declare const getTriggerEls: (scope: Scope) => HTMLElement[];
+declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 
-export { getArrowEl, getArrowId, getContentEl, getContentId, getPositionerEl, getPositionerId, getTriggerEl, getTriggerId };
+export { getActiveTriggerEl, getArrowEl, getArrowId, getContentEl, getContentId, getPositionerEl, getPositionerId, getTriggerEl, getTriggerEls, getTriggerId };

package/dist/tooltip.dom.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tooltip.dom.ts
 var tooltip_dom_exports = {};
 __export(tooltip_dom_exports, {
+  getActiveTriggerEl: () => getActiveTriggerEl,
   getArrowEl: () => getArrowEl,
   getArrowId: () => getArrowId,
   getContentEl: () => getContentEl,
@@ -27,10 +28,17 @@ __export(tooltip_dom_exports, {
   getPositionerEl: () => getPositionerEl,
   getPositionerId: () => getPositionerId,
   getTriggerEl: () => getTriggerEl,
+  getTriggerEls: () => getTriggerEls,
   getTriggerId: () => getTriggerId
 });
 module.exports = __toCommonJS(tooltip_dom_exports);
-var getTriggerId = (scope) => scope.ids?.trigger ?? `tooltip:${scope.id}:trigger`;
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var getTriggerId = (scope, value) => {
+  const customId = scope.ids?.trigger;
+  if (customId != null) return (0, import_utils.isFunction)(customId) ? customId(value) : customId;
+  return value ? `tooltip:${scope.id}:trigger:${value}` : `tooltip:${scope.id}:trigger`;
+};
 var getContentId = (scope) => scope.ids?.content ?? `tooltip:${scope.id}:content`;
 var getArrowId = (scope) => scope.ids?.arrow ?? `tooltip:${scope.id}:arrow`;
 var getPositionerId = (scope) => scope.ids?.positioner ?? `tooltip:${scope.id}:popper`;
@@ -38,8 +46,13 @@ var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
 var getContentEl = (scope) => scope.getById(getContentId(scope));
 var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
 var getArrowEl = (scope) => scope.getById(getArrowId(scope));
+var getTriggerEls = (scope) => (0, import_dom_query.queryAll)(scope.getDoc(), `[data-scope="tooltip"][data-part="trigger"][data-ownedby="${scope.id}"]`);
+var getActiveTriggerEl = (scope, value) => {
+  return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getActiveTriggerEl,
   getArrowEl,
   getArrowId,
   getContentEl,
@@ -47,5 +60,6 @@ var getArrowEl = (scope) => scope.getById(getArrowId(scope));
   getPositionerEl,
   getPositionerId,
   getTriggerEl,
+  getTriggerEls,
   getTriggerId
 });

package/dist/tooltip.dom.mjs

@@ -1,5 +1,11 @@
 // src/tooltip.dom.ts
-var getTriggerId = (scope) => scope.ids?.trigger ?? `tooltip:${scope.id}:trigger`;
+import { queryAll } from "@zag-js/dom-query";
+import { isFunction } from "@zag-js/utils";
+var getTriggerId = (scope, value) => {
+  const customId = scope.ids?.trigger;
+  if (customId != null) return isFunction(customId) ? customId(value) : customId;
+  return value ? `tooltip:${scope.id}:trigger:${value}` : `tooltip:${scope.id}:trigger`;
+};
 var getContentId = (scope) => scope.ids?.content ?? `tooltip:${scope.id}:content`;
 var getArrowId = (scope) => scope.ids?.arrow ?? `tooltip:${scope.id}:arrow`;
 var getPositionerId = (scope) => scope.ids?.positioner ?? `tooltip:${scope.id}:popper`;
@@ -7,7 +13,12 @@ var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
 var getContentEl = (scope) => scope.getById(getContentId(scope));
 var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
 var getArrowEl = (scope) => scope.getById(getArrowId(scope));
+var getTriggerEls = (scope) => queryAll(scope.getDoc(), `[data-scope="tooltip"][data-part="trigger"][data-ownedby="${scope.id}"]`);
+var getActiveTriggerEl = (scope, value) => {
+  return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
+};
 export {
+  getActiveTriggerEl,
   getArrowEl,
   getArrowId,
   getContentEl,
@@ -15,5 +26,6 @@ export {
   getPositionerEl,
   getPositionerId,
   getTriggerEl,
+  getTriggerEls,
   getTriggerId
 };

package/dist/tooltip.machine.js

@@ -37,9 +37,9 @@ 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_utils = require("@zag-js/utils");
 var dom = __toESM(require("./tooltip.dom.js"));
 var import_tooltip = require("./tooltip.store.js");
-var import_utils = require("@zag-js/utils");
 var { and, not } = (0, import_core.createGuards)();
 var machine = (0, import_core.createMachine)({
   initialState: ({ prop }) => {
@@ -67,9 +67,19 @@ var machine = (0, import_core.createMachine)({
     };
   },
   effects: ["trackFocusVisible", "trackStore"],
-  context: ({ bindable }) => ({
+  context: ({ bindable, prop, scope }) => ({
     currentPlacement: bindable(() => ({ defaultValue: void 0 })),
-    hasPointerMoveOpened: bindable(() => ({ defaultValue: false }))
+    hasPointerMoveOpened: bindable(() => ({ defaultValue: null })),
+    triggerValue: bindable(() => ({
+      defaultValue: prop("defaultTriggerValue") ?? null,
+      value: prop("triggerValue"),
+      onChange(value) {
+        const onTriggerValueChange = prop("onTriggerValueChange");
+        if (!onTriggerValueChange) return;
+        const triggerElement = dom.getActiveTriggerEl(scope, value);
+        onTriggerValueChange({ value, triggerElement });
+      }
+    }))
   }),
   watch({ track, action, prop }) {
     track([() => prop("disabled")], () => {
@@ -78,6 +88,14 @@ var machine = (0, import_core.createMachine)({
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
     });
+    track([() => prop("triggerValue")], () => {
+      action(["repositionImmediate"]);
+    });
+  },
+  on: {
+    "triggerValue.set": {
+      actions: ["setTriggerValue", "repositionImmediate"]
+    }
   },
   states: {
     closed: {
@@ -89,11 +107,11 @@ var machine = (0, import_core.createMachine)({
         open: [
           {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           }
         ],
         "pointer.leave": {
@@ -102,12 +120,13 @@ var machine = (0, import_core.createMachine)({
         "pointer.move": [
           {
             guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
-            target: "opening"
+            target: "opening",
+            actions: ["setTriggerValue"]
           },
           {
             guard: not("hasPointerMoveOpened"),
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "invokeOnOpen", "setTriggerValue"]
           }
         ]
       }
@@ -134,11 +153,11 @@ var machine = (0, import_core.createMachine)({
         open: [
           {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           }
         ],
         "pointer.leave": [
@@ -204,6 +223,12 @@ var machine = (0, import_core.createMachine)({
         },
         "positioning.set": {
           actions: ["reposition"]
+        },
+        "triggerValue.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",
+          actions: ["setTriggerValue", "immediateReopen"]
         }
       }
     },
@@ -240,13 +265,20 @@ var machine = (0, import_core.createMachine)({
           {
             guard: "isOpenControlled",
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
-            actions: ["setPointerMoveOpened", "invokeOnOpen", "toggleVisibility"]
+            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen", "toggleVisibility"]
           },
           {
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen"]
           }
         ],
+        "triggerValue.set": {
+          target: "open",
+          actions: ["setTriggerValue", "repositionImmediate"]
+        },
+        reopen: {
+          target: "open"
+        },
         "content.pointer.move": {
           guard: "isInteractive",
           target: "open"
@@ -262,7 +294,7 @@ var machine = (0, import_core.createMachine)({
       noVisibleTooltip: () => import_tooltip.store.get("id") === null,
       isVisible: ({ prop }) => prop("id") === import_tooltip.store.get("id"),
       isInteractive: ({ prop }) => !!prop("interactive"),
-      hasPointerMoveOpened: ({ context }) => context.get("hasPointerMoveOpened"),
+      hasPointerMoveOpened: ({ context }) => !!context.get("hasPointerMoveOpened"),
       isOpenControlled: ({ prop }) => prop("open") !== void 0
     },
     actions: {
@@ -289,16 +321,27 @@ var machine = (0, import_core.createMachine)({
       reposition: ({ context, event, prop, scope }) => {
         if (event.type !== "positioning.set") return;
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return (0, import_popper.getPlacement)(dom.getTriggerEl(scope), getPositionerEl2, {
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
-          defer: true,
           listeners: false,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
           }
         });
       },
+      repositionImmediate: ({ context, event, prop, scope }) => {
+        const triggerValue = event.value ?? context.get("triggerValue");
+        const getPositionerEl2 = () => dom.getPositionerEl(scope);
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, triggerValue);
+        return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
+          ...prop("positioning"),
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
+      },
       toggleVisibility: ({ prop, event, send }) => {
         queueMicrotask(() => {
           send({
@@ -307,11 +350,21 @@ var machine = (0, import_core.createMachine)({
           });
         });
       },
-      setPointerMoveOpened: ({ context }) => {
-        context.set("hasPointerMoveOpened", true);
+      setPointerMoveOpened: ({ context, event }) => {
+        const triggerId = event.triggerId ?? event.previousEvent?.triggerId;
+        context.set("hasPointerMoveOpened", triggerId ?? null);
       },
       clearPointerMoveOpened: ({ context }) => {
-        context.set("hasPointerMoveOpened", false);
+        context.set("hasPointerMoveOpened", null);
+      },
+      setTriggerValue: ({ context, event }) => {
+        if (event.value === void 0) return;
+        context.set("triggerValue", event.value);
+      },
+      immediateReopen: ({ send }) => {
+        queueMicrotask(() => {
+          send({ type: "reopen" });
+        });
       }
     },
     effects: {
@@ -323,7 +376,8 @@ var machine = (0, import_core.createMachine)({
           context.set("currentPlacement", prop("positioning").placement);
         }
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return (0, import_popper.getPlacement)(dom.getTriggerEl(scope), getPositionerEl2, {
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -336,9 +390,10 @@ var machine = (0, import_core.createMachine)({
         const onChange = () => send({ type: "close", src: "pointerlock:change" });
         return (0, import_dom_query.addDomEvent)(doc, "pointerlockchange", onChange, false);
       },
-      trackScroll: ({ send, prop, scope }) => {
+      trackScroll: ({ send, prop, scope, context }) => {
         if (!prop("closeOnScroll")) return;
-        const triggerEl = dom.getTriggerEl(scope);
+        const triggerValue = context.get("triggerValue");
+        const triggerEl = dom.getActiveTriggerEl(scope, triggerValue);
         if (!triggerEl) return;
         const overflowParents = (0, import_dom_query.getOverflowAncestors)(triggerEl);
         const cleanups = overflowParents.map((overflowParent) => {
@@ -375,15 +430,15 @@ var machine = (0, import_core.createMachine)({
         };
         return (0, import_dom_query.addDomEvent)(document, "keydown", onKeyDown, true);
       },
-      waitForOpenDelay: ({ send, prop }) => {
+      waitForOpenDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.openDelay" });
+          send({ type: "after.openDelay", previousEvent: event });
         }, prop("openDelay"));
         return () => clearTimeout(id);
       },
-      waitForCloseDelay: ({ send, prop }) => {
+      waitForCloseDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.closeDelay" });
+          send({ type: "after.closeDelay", previousEvent: event });
         }, prop("closeDelay"));
         return () => clearTimeout(id);
       }

package/dist/tooltip.machine.mjs

@@ -3,9 +3,9 @@ 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 { ensureProps } from "@zag-js/utils";
 import * as dom from "./tooltip.dom.mjs";
 import { store } from "./tooltip.store.mjs";
-import { ensureProps } from "@zag-js/utils";
 var { and, not } = createGuards();
 var machine = createMachine({
   initialState: ({ prop }) => {
@@ -33,9 +33,19 @@ var machine = createMachine({
     };
   },
   effects: ["trackFocusVisible", "trackStore"],
-  context: ({ bindable }) => ({
+  context: ({ bindable, prop, scope }) => ({
     currentPlacement: bindable(() => ({ defaultValue: void 0 })),
-    hasPointerMoveOpened: bindable(() => ({ defaultValue: false }))
+    hasPointerMoveOpened: bindable(() => ({ defaultValue: null })),
+    triggerValue: bindable(() => ({
+      defaultValue: prop("defaultTriggerValue") ?? null,
+      value: prop("triggerValue"),
+      onChange(value) {
+        const onTriggerValueChange = prop("onTriggerValueChange");
+        if (!onTriggerValueChange) return;
+        const triggerElement = dom.getActiveTriggerEl(scope, value);
+        onTriggerValueChange({ value, triggerElement });
+      }
+    }))
   }),
   watch({ track, action, prop }) {
     track([() => prop("disabled")], () => {
@@ -44,6 +54,14 @@ var machine = createMachine({
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
     });
+    track([() => prop("triggerValue")], () => {
+      action(["repositionImmediate"]);
+    });
+  },
+  on: {
+    "triggerValue.set": {
+      actions: ["setTriggerValue", "repositionImmediate"]
+    }
   },
   states: {
     closed: {
@@ -55,11 +73,11 @@ var machine = createMachine({
         open: [
           {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           }
         ],
         "pointer.leave": {
@@ -68,12 +86,13 @@ var machine = createMachine({
         "pointer.move": [
           {
             guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
-            target: "opening"
+            target: "opening",
+            actions: ["setTriggerValue"]
           },
           {
             guard: not("hasPointerMoveOpened"),
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "invokeOnOpen", "setTriggerValue"]
           }
         ]
       }
@@ -100,11 +119,11 @@ var machine = createMachine({
         open: [
           {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           }
         ],
         "pointer.leave": [
@@ -170,6 +189,12 @@ var machine = createMachine({
         },
         "positioning.set": {
           actions: ["reposition"]
+        },
+        "triggerValue.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",
+          actions: ["setTriggerValue", "immediateReopen"]
         }
       }
     },
@@ -206,13 +231,20 @@ var machine = createMachine({
           {
             guard: "isOpenControlled",
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
-            actions: ["setPointerMoveOpened", "invokeOnOpen", "toggleVisibility"]
+            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen", "toggleVisibility"]
           },
           {
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen"]
           }
         ],
+        "triggerValue.set": {
+          target: "open",
+          actions: ["setTriggerValue", "repositionImmediate"]
+        },
+        reopen: {
+          target: "open"
+        },
         "content.pointer.move": {
           guard: "isInteractive",
           target: "open"
@@ -228,7 +260,7 @@ var machine = createMachine({
       noVisibleTooltip: () => store.get("id") === null,
       isVisible: ({ prop }) => prop("id") === store.get("id"),
       isInteractive: ({ prop }) => !!prop("interactive"),
-      hasPointerMoveOpened: ({ context }) => context.get("hasPointerMoveOpened"),
+      hasPointerMoveOpened: ({ context }) => !!context.get("hasPointerMoveOpened"),
       isOpenControlled: ({ prop }) => prop("open") !== void 0
     },
     actions: {
@@ -255,16 +287,27 @@ var machine = createMachine({
       reposition: ({ context, event, prop, scope }) => {
         if (event.type !== "positioning.set") return;
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return getPlacement(dom.getTriggerEl(scope), getPositionerEl2, {
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        getPlacement(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
-          defer: true,
           listeners: false,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
           }
         });
       },
+      repositionImmediate: ({ context, event, prop, scope }) => {
+        const triggerValue = event.value ?? context.get("triggerValue");
+        const getPositionerEl2 = () => dom.getPositionerEl(scope);
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, triggerValue);
+        return getPlacement(getTriggerEl, getPositionerEl2, {
+          ...prop("positioning"),
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
+      },
       toggleVisibility: ({ prop, event, send }) => {
         queueMicrotask(() => {
           send({
@@ -273,11 +316,21 @@ var machine = createMachine({
           });
         });
       },
-      setPointerMoveOpened: ({ context }) => {
-        context.set("hasPointerMoveOpened", true);
+      setPointerMoveOpened: ({ context, event }) => {
+        const triggerId = event.triggerId ?? event.previousEvent?.triggerId;
+        context.set("hasPointerMoveOpened", triggerId ?? null);
       },
       clearPointerMoveOpened: ({ context }) => {
-        context.set("hasPointerMoveOpened", false);
+        context.set("hasPointerMoveOpened", null);
+      },
+      setTriggerValue: ({ context, event }) => {
+        if (event.value === void 0) return;
+        context.set("triggerValue", event.value);
+      },
+      immediateReopen: ({ send }) => {
+        queueMicrotask(() => {
+          send({ type: "reopen" });
+        });
       }
     },
     effects: {
@@ -289,7 +342,8 @@ var machine = createMachine({
           context.set("currentPlacement", prop("positioning").placement);
         }
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return getPlacement(dom.getTriggerEl(scope), getPositionerEl2, {
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return getPlacement(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -302,9 +356,10 @@ var machine = createMachine({
         const onChange = () => send({ type: "close", src: "pointerlock:change" });
         return addDomEvent(doc, "pointerlockchange", onChange, false);
       },
-      trackScroll: ({ send, prop, scope }) => {
+      trackScroll: ({ send, prop, scope, context }) => {
         if (!prop("closeOnScroll")) return;
-        const triggerEl = dom.getTriggerEl(scope);
+        const triggerValue = context.get("triggerValue");
+        const triggerEl = dom.getActiveTriggerEl(scope, triggerValue);
         if (!triggerEl) return;
         const overflowParents = getOverflowAncestors(triggerEl);
         const cleanups = overflowParents.map((overflowParent) => {
@@ -341,15 +396,15 @@ var machine = createMachine({
         };
         return addDomEvent(document, "keydown", onKeyDown, true);
       },
-      waitForOpenDelay: ({ send, prop }) => {
+      waitForOpenDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.openDelay" });
+          send({ type: "after.openDelay", previousEvent: event });
         }, prop("openDelay"));
         return () => clearTimeout(id);
       },
-      waitForCloseDelay: ({ send, prop }) => {
+      waitForCloseDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.closeDelay" });
+          send({ type: "after.closeDelay", previousEvent: event });
         }, prop("closeDelay"));
         return () => clearTimeout(id);
       }

package/dist/tooltip.props.js

@@ -29,10 +29,12 @@ var import_utils = require("@zag-js/utils");
 var props = (0, import_types.createProps)()([
   "aria-label",
   "closeDelay",
+  "closeOnClick",
   "closeOnEscape",
   "closeOnPointerDown",
   "closeOnScroll",
-  "closeOnClick",
+  "defaultOpen",
+  "defaultTriggerValue",
   "dir",
   "disabled",
   "getRootNode",
@@ -40,10 +42,11 @@ var props = (0, import_types.createProps)()([
   "ids",
   "interactive",
   "onOpenChange",
-  "defaultOpen",
+  "onTriggerValueChange",
   "open",
   "openDelay",
-  "positioning"
+  "positioning",
+  "triggerValue"
 ]);
 var splitProps = (0, import_utils.createSplitProps)(props);
 // Annotate the CommonJS export names for ESM import in node:

package/dist/tooltip.props.mjs

@@ -4,10 +4,12 @@ import { createSplitProps } from "@zag-js/utils";
 var props = createProps()([
   "aria-label",
   "closeDelay",
+  "closeOnClick",
   "closeOnEscape",
   "closeOnPointerDown",
   "closeOnScroll",
-  "closeOnClick",
+  "defaultOpen",
+  "defaultTriggerValue",
   "dir",
   "disabled",
   "getRootNode",
@@ -15,10 +17,11 @@ var props = createProps()([
   "ids",
   "interactive",
   "onOpenChange",
-  "defaultOpen",
+  "onTriggerValueChange",
   "open",
   "openDelay",
-  "positioning"
+  "positioning",
+  "triggerValue"
 ]);
 var splitProps = createSplitProps(props);
 export {

package/dist/tooltip.types.d.mts

@@ -6,8 +6,18 @@ import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag
 interface OpenChangeDetails {
     open: boolean;
 }
+interface TriggerValueChangeDetails {
+    /**
+     * The value of the trigger
+     */
+    value: string | null;
+    /**
+     * The trigger element
+     */
+    triggerElement: HTMLElement | null;
+}
 type ElementIds = Partial<{
-    trigger: string;
+    trigger: string | ((value?: string) => string);
     content: string;
     arrow: string;
     positioner: string;
@@ -80,6 +90,19 @@ interface TooltipProps extends DirectionProperty, CommonProperties {
      * Use when you don't need to control the open state of the tooltip.
      */
     defaultOpen?: boolean | undefined;
+    /**
+     * The controlled trigger value
+     */
+    triggerValue?: string | null | undefined;
+    /**
+     * The initial trigger value when rendered.
+     * Use when you don't need to control the trigger value.
+     */
+    defaultTriggerValue?: string | null | undefined;
+    /**
+     * Function called when the trigger value changes.
+     */
+    onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
 type PropsWithDefault = "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "closeOnScroll" | "closeOnClick" | "interactive" | "id" | "positioning";
 interface TooltipSchema {
@@ -87,7 +110,8 @@ interface TooltipSchema {
     props: RequiredBy<TooltipProps, PropsWithDefault>;
     context: {
         currentPlacement: Placement | undefined;
-        hasPointerMoveOpened: boolean;
+        hasPointerMoveOpened: string | null;
+        triggerValue: string | null;
     };
     event: EventObject;
     action: string;
@@ -96,6 +120,12 @@ interface TooltipSchema {
 }
 type TooltipService = Service<TooltipSchema>;
 type TooltipMachine = Machine<TooltipSchema>;
+interface TriggerProps {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value?: string;
+}
 interface TooltipApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the tooltip is open.
@@ -105,15 +135,23 @@ interface TooltipApi<T extends PropTypes = PropTypes> {
      * Function to open the tooltip.
      */
     setOpen: (open: boolean) => void;
+    /**
+     * The trigger value
+     */
+    triggerValue: string | null;
+    /**
+     * Function to set the trigger value
+     */
+    setTriggerValue: (value: string | null) => void;
     /**
      * Function to reposition the popover
      */
     reposition: (options?: Partial<PositioningOptions>) => void;
-    getTriggerProps: () => T["button"];
+    getTriggerProps: (props?: TriggerProps) => T["button"];
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getPositionerProps: () => T["element"];
     getContentProps: () => T["element"];
 }
 
-export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService };
+export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerValueChangeDetails };

package/dist/tooltip.types.d.ts

@@ -6,8 +6,18 @@ import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag
 interface OpenChangeDetails {
     open: boolean;
 }
+interface TriggerValueChangeDetails {
+    /**
+     * The value of the trigger
+     */
+    value: string | null;
+    /**
+     * The trigger element
+     */
+    triggerElement: HTMLElement | null;
+}
 type ElementIds = Partial<{
-    trigger: string;
+    trigger: string | ((value?: string) => string);
     content: string;
     arrow: string;
     positioner: string;
@@ -80,6 +90,19 @@ interface TooltipProps extends DirectionProperty, CommonProperties {
      * Use when you don't need to control the open state of the tooltip.
      */
     defaultOpen?: boolean | undefined;
+    /**
+     * The controlled trigger value
+     */
+    triggerValue?: string | null | undefined;
+    /**
+     * The initial trigger value when rendered.
+     * Use when you don't need to control the trigger value.
+     */
+    defaultTriggerValue?: string | null | undefined;
+    /**
+     * Function called when the trigger value changes.
+     */
+    onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
 type PropsWithDefault = "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "closeOnScroll" | "closeOnClick" | "interactive" | "id" | "positioning";
 interface TooltipSchema {
@@ -87,7 +110,8 @@ interface TooltipSchema {
     props: RequiredBy<TooltipProps, PropsWithDefault>;
     context: {
         currentPlacement: Placement | undefined;
-        hasPointerMoveOpened: boolean;
+        hasPointerMoveOpened: string | null;
+        triggerValue: string | null;
     };
     event: EventObject;
     action: string;
@@ -96,6 +120,12 @@ interface TooltipSchema {
 }
 type TooltipService = Service<TooltipSchema>;
 type TooltipMachine = Machine<TooltipSchema>;
+interface TriggerProps {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value?: string;
+}
 interface TooltipApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the tooltip is open.
@@ -105,15 +135,23 @@ interface TooltipApi<T extends PropTypes = PropTypes> {
      * Function to open the tooltip.
      */
     setOpen: (open: boolean) => void;
+    /**
+     * The trigger value
+     */
+    triggerValue: string | null;
+    /**
+     * Function to set the trigger value
+     */
+    setTriggerValue: (value: string | null) => void;
     /**
      * Function to reposition the popover
      */
     reposition: (options?: Partial<PositioningOptions>) => void;
-    getTriggerProps: () => T["button"];
+    getTriggerProps: (props?: TriggerProps) => T["button"];
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getPositionerProps: () => T["element"];
     getContentProps: () => T["element"];
 }
 
-export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService };
+export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerValueChangeDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tooltip",
-  "version": "1.38.1",
+  "version": "1.39.0",
   "description": "Core logic for the tooltip widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,13 +26,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.38.1",
-    "@zag-js/core": "1.38.1",
-    "@zag-js/popper": "1.38.1",
-    "@zag-js/focus-visible": "1.38.1",
-    "@zag-js/dom-query": "1.38.1",
-    "@zag-js/utils": "1.38.1",
-    "@zag-js/types": "1.38.1"
+    "@zag-js/anatomy": "1.39.0",
+    "@zag-js/core": "1.39.0",
+    "@zag-js/popper": "1.39.0",
+    "@zag-js/focus-visible": "1.39.0",
+    "@zag-js/dom-query": "1.39.0",
+    "@zag-js/utils": "1.39.0",
+    "@zag-js/types": "1.39.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"