bits-ui 2.15.8 → 2.16.0

package/dist/bits/popover/popover.svelte.js

@@ -260,7 +260,6 @@ export class PopoverContentState {
             enabled: () => this.root.opts.open.current &&
                 this.root.openedViaHover &&
                 !this.root.hasInteractedWithContent,
-            throttlePointerMove: true,
             onPointerExit: () => {
                 this.root.handleDelayedHoverClose();
             },

package/dist/bits/tooltip/components/tooltip-content.svelte

@@ -23,6 +23,7 @@
 		sticky = "partial",
 		strategy,
 		hideWhenDetached = false,
+		customAnchor,
 		collisionPadding = 0,
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
@@ -51,6 +52,7 @@
 		hideWhenDetached,
 		collisionPadding,
 		strategy,
+		customAnchor: customAnchor ?? contentState.root.triggerNode,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));

package/dist/bits/tooltip/components/tooltip-trigger.svelte

@@ -1,9 +1,12 @@
-<script lang="ts">
+<script lang="ts" module>
+	type T = unknown;
+</script>
+
+<script lang="ts" generics="T = never">
 	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TooltipTriggerProps } from "../types.js";
 	import { TooltipTriggerState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
-	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
 	const uid = $props.id();
 
@@ -12,16 +15,20 @@
 		child,
 		id = createId(uid),
 		disabled = false,
+		payload,
+		tether,
 		type = "button",
 		tabindex = 0,
 		ref = $bindable(null),
 		...restProps
-	}: TooltipTriggerProps = $props();
+	}: TooltipTriggerProps<T> = $props();
 
 	const triggerState = TooltipTriggerState.create({
 		id: boxWith(() => id),
 		disabled: boxWith(() => disabled ?? false),
 		tabindex: boxWith(() => tabindex ?? 0),
+		payload: boxWith(() => payload),
+		tether: boxWith(() => tether),
 		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
@@ -31,12 +38,10 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id} ref={triggerState.opts.ref} tooltip={true}>
-	{#if child}
-		{@render child({ props: mergedProps })}
-	{:else}
-		<button {...mergedProps}>
-			{@render children?.()}
-		</button>
-	{/if}
-</FloatingLayerAnchor>
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/bits/tooltip/components/tooltip-trigger.svelte.d.ts

@@ -1,4 +1,18 @@
 import type { TooltipTriggerProps } from "../types.js";
-declare const TooltipTrigger: import("svelte").Component<TooltipTriggerProps, {}, "ref">;
-type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+declare class __sveltets_Render<T = never> {
+    props(): TooltipTriggerProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = never>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = never>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TooltipTrigger: $$IsomorphicComponent;
+type TooltipTrigger<T = never> = InstanceType<typeof TooltipTrigger<T>>;
 export default TooltipTrigger;

package/dist/bits/tooltip/components/tooltip.svelte

@@ -1,4 +1,8 @@
-<script lang="ts">
+<script lang="ts" module>
+	type T = unknown;
+</script>
+
+<script lang="ts" generics="T = never">
 	import { boxWith } from "svelte-toolbelt";
 	import type { TooltipRootProps } from "../types.js";
 	import { TooltipRootState } from "../tooltip.svelte.js";
@@ -7,6 +11,7 @@
 
 	let {
 		open = $bindable(false),
+		triggerId = $bindable<string | null>(null),
 		onOpenChange = noop,
 		onOpenChangeComplete = noop,
 		disabled,
@@ -14,10 +19,11 @@
 		disableCloseOnTriggerClick,
 		disableHoverableContent,
 		ignoreNonKeyboardFocus,
+		tether,
 		children,
-	}: TooltipRootProps = $props();
+	}: TooltipRootProps<T> = $props();
 
-	TooltipRootState.create({
+	const rootState = TooltipRootState.create({
 		open: boxWith(
 			() => open,
 			(v) => {
@@ -25,15 +31,26 @@
 				onOpenChange(v);
 			}
 		),
+		triggerId: boxWith(
+			() => triggerId,
+			(v) => {
+				triggerId = v;
+			}
+		),
 		delayDuration: boxWith(() => delayDuration),
 		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
 		disableHoverableContent: boxWith(() => disableHoverableContent),
 		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
 		disabled: boxWith(() => disabled),
 		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+		tether: boxWith(() => tether),
 	});
 </script>
 
 <FloatingLayer tooltip>
-	{@render children?.()}
+	{@render children?.({
+		open: rootState.opts.open.current,
+		triggerId: rootState.activeTriggerId,
+		payload: rootState.activePayload as [T] extends [never] ? null : T | null,
+	})}
 </FloatingLayer>

package/dist/bits/tooltip/components/tooltip.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const Tooltip: import("svelte").Component<import("../types.js").TooltipRootPropsWithoutHTML, {}, "open">;
-type Tooltip = ReturnType<typeof Tooltip>;
+import type { TooltipRootProps } from "../types.js";
+declare class __sveltets_Render<T = never> {
+    props(): TooltipRootProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "open" | "triggerId";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = never>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = never>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tooltip: $$IsomorphicComponent;
+type Tooltip<T = never> = InstanceType<typeof Tooltip<T>>;
 export default Tooltip;

package/dist/bits/tooltip/exports.d.ts

@@ -5,5 +5,6 @@ export { default as Trigger } from "./components/tooltip-trigger.svelte";
 export { default as Arrow } from "./components/tooltip-arrow.svelte";
 export { default as Provider } from "./components/tooltip-provider.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { TooltipProviderPropsWithoutHTML as ProviderProps, TooltipRootPropsWithoutHTML as RootProps, TooltipArrowProps as ArrowProps, TooltipContentProps as ContentProps, TooltipContentStaticProps as ContentStaticProps, TooltipTriggerProps as TriggerProps, } from "./types.js";
+export { createTooltipTether as createTether } from "./tooltip.svelte.js";
+export type { TooltipProviderPropsWithoutHTML as ProviderProps, TooltipRootPropsWithoutHTML as RootProps, TooltipArrowProps as ArrowProps, TooltipContentProps as ContentProps, TooltipContentStaticProps as ContentStaticProps, TooltipTriggerProps as TriggerProps, TooltipTether as Tether, TooltipRootSnippetProps as RootSnippetProps, } from "./types.js";
 export type { PortalProps } from "../utilities/portal/types.js";

package/dist/bits/tooltip/exports.js

@@ -5,3 +5,4 @@ export { default as Trigger } from "./components/tooltip-trigger.svelte";
 export { default as Arrow } from "./components/tooltip-arrow.svelte";
 export { default as Provider } from "./components/tooltip-provider.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
+export { createTooltipTether as createTether } from "./tooltip.svelte.js";

package/dist/bits/tooltip/tooltip.svelte.d.ts

@@ -3,6 +3,38 @@ import type { OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/type
 import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 export declare const tooltipAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger"]>;
+type TooltipTriggerRecord = {
+    id: string;
+    node: HTMLElement | null;
+    payload: unknown;
+    disabled: boolean;
+};
+declare class TooltipTriggerRegistryState {
+    #private;
+    triggers: Map<string, TooltipTriggerRecord>;
+    activeTriggerId: string | null;
+    activeTriggerNode: HTMLElement | null;
+    activePayload: {} | null;
+    register: (record: TooltipTriggerRecord) => void;
+    update: (record: TooltipTriggerRecord) => void;
+    unregister: (id: string) => void;
+    setActiveTrigger: (id: string | null) => void;
+    get: (id: string) => TooltipTriggerRecord | undefined;
+    has: (id: string) => boolean;
+    getFirstTriggerId: () => string | null;
+}
+declare class TooltipTetherState {
+    readonly registry: TooltipTriggerRegistryState;
+    root: TooltipRootState | null;
+}
+export declare class TooltipTether<Payload = never> {
+    #private;
+    get state(): TooltipTetherState;
+    open(triggerId: string): void;
+    close(): void;
+    get isOpen(): boolean;
+}
+export declare function createTooltipTether<Payload = never>(): TooltipTether<Payload>;
 interface TooltipProviderStateOpts extends ReadableBoxedValues<{
     delayDuration: number;
     disableHoverableContent: boolean;
@@ -30,8 +62,10 @@ interface TooltipRootStateOpts extends ReadableBoxedValues<{
     disabled: boolean | undefined;
     ignoreNonKeyboardFocus: boolean | undefined;
     onOpenChangeComplete: OnChangeFn<boolean>;
+    tether: TooltipTether<unknown> | undefined;
 }>, WritableBoxedValues<{
     open: boolean;
+    triggerId: string | null;
 }> {
 }
 export declare class TooltipRootState {
@@ -44,34 +78,47 @@ export declare class TooltipRootState {
     readonly disableCloseOnTriggerClick: boolean;
     readonly disabled: boolean;
     readonly ignoreNonKeyboardFocus: boolean;
+    readonly registry: TooltipTriggerRegistryState;
+    readonly tether: TooltipTetherState | null;
     contentNode: HTMLElement | null;
     contentPresence: PresenceManager;
-    triggerNode: HTMLElement | null;
     readonly stateAttr: string;
     constructor(opts: TooltipRootStateOpts, provider: TooltipProviderState);
     handleOpen: () => void;
     handleClose: () => void;
-    onTriggerEnter: () => void;
+    onTriggerEnter: (triggerId: string) => void;
     onTriggerLeave: () => void;
+    ensureActiveTrigger: () => void;
+    setActiveTrigger: (triggerId: string | null) => void;
+    registerTrigger: (trigger: TooltipTriggerRecord) => void;
+    updateTrigger: (trigger: TooltipTriggerRecord) => void;
+    unregisterTrigger: (id: string) => void;
+    isActiveTrigger: (triggerId: string) => boolean;
+    get triggerNode(): HTMLElement | null;
+    get activePayload(): {} | null;
+    get activeTriggerId(): string | null;
 }
 interface TooltipTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     tabindex: number;
+    payload: unknown;
+    tether: TooltipTether<unknown> | undefined;
 }> {
 }
 export declare class TooltipTriggerState {
     #private;
     static create(opts: TooltipTriggerStateOpts): TooltipTriggerState;
     readonly opts: TooltipTriggerStateOpts;
-    readonly root: TooltipRootState;
+    readonly root: TooltipRootState | null;
+    readonly tether: TooltipTetherState | null;
     readonly attachment: RefAttachment;
     domContext: DOMContext;
-    constructor(opts: TooltipTriggerStateOpts, root: TooltipRootState);
+    constructor(opts: TooltipTriggerStateOpts, root: TooltipRootState | null, tether: TooltipTetherState | null);
     handlePointerUp: () => void;
     readonly props: {
         readonly id: string;
         readonly "aria-describedby": string | undefined;
-        readonly "data-state": "closed" | "delayed-open" | "instant-open";
+        readonly "data-state": "closed" | "delayed-open" | "instant-open" | undefined;
         readonly "data-disabled": "" | undefined;
         readonly "data-delay-duration": `${number}`;
         readonly tabindex: number | undefined;
@@ -92,7 +139,6 @@ interface TooltipContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
 }> {
 }
 export declare class TooltipContentState {
-    #private;
     static create(opts: TooltipContentStateOpts): TooltipContentState;
     readonly opts: TooltipContentStateOpts;
     readonly root: TooltipRootState;

package/dist/bits/tooltip/tooltip.svelte.js

@@ -12,6 +12,103 @@ export const tooltipAttrs = createBitsAttrs({
 });
 const TooltipProviderContext = new Context("Tooltip.Provider");
 const TooltipRootContext = new Context("Tooltip.Root");
+class TooltipTriggerRegistryState {
+    triggers = $state(new Map());
+    activeTriggerId = $state(null);
+    activeTriggerNode = $derived.by(() => {
+        const activeTriggerId = this.activeTriggerId;
+        if (activeTriggerId === null)
+            return null;
+        return this.triggers.get(activeTriggerId)?.node ?? null;
+    });
+    activePayload = $derived.by(() => {
+        const activeTriggerId = this.activeTriggerId;
+        if (activeTriggerId === null)
+            return null;
+        return this.triggers.get(activeTriggerId)?.payload ?? null;
+    });
+    register = (record) => {
+        const next = new Map(this.triggers);
+        next.set(record.id, record);
+        this.triggers = next;
+        this.#coerceActiveTrigger();
+    };
+    update = (record) => {
+        const next = new Map(this.triggers);
+        next.set(record.id, record);
+        this.triggers = next;
+        this.#coerceActiveTrigger();
+    };
+    unregister = (id) => {
+        if (!this.triggers.has(id))
+            return;
+        const next = new Map(this.triggers);
+        next.delete(id);
+        this.triggers = next;
+        if (this.activeTriggerId === id) {
+            this.activeTriggerId = null;
+        }
+    };
+    setActiveTrigger = (id) => {
+        if (id === null) {
+            this.activeTriggerId = null;
+            return;
+        }
+        if (!this.triggers.has(id)) {
+            this.activeTriggerId = null;
+            return;
+        }
+        this.activeTriggerId = id;
+    };
+    get = (id) => {
+        return this.triggers.get(id);
+    };
+    has = (id) => {
+        return this.triggers.has(id);
+    };
+    getFirstTriggerId = () => {
+        const firstEntry = this.triggers.entries().next();
+        if (firstEntry.done)
+            return null;
+        return firstEntry.value[0];
+    };
+    #coerceActiveTrigger = () => {
+        const activeTriggerId = this.activeTriggerId;
+        if (activeTriggerId === null)
+            return;
+        if (!this.triggers.has(activeTriggerId)) {
+            this.activeTriggerId = null;
+        }
+    };
+}
+class TooltipTetherState {
+    registry = new TooltipTriggerRegistryState();
+    root = $state(null);
+}
+// oxlint-disable-next-line no-unused-vars
+export class TooltipTether {
+    #state = new TooltipTetherState();
+    get state() {
+        return this.#state;
+    }
+    open(triggerId) {
+        if (!this.#state.registry.has(triggerId)) {
+            return;
+        }
+        this.#state.registry.setActiveTrigger(triggerId);
+        this.#state.root?.setActiveTrigger(triggerId);
+        this.#state.root?.handleOpen();
+    }
+    close() {
+        this.#state.root?.handleClose();
+    }
+    get isOpen() {
+        return this.#state.root?.opts.open.current ?? false;
+    }
+}
+export function createTooltipTether() {
+    return new TooltipTether();
+}
 export class TooltipProviderState {
     static create(opts) {
         return TooltipProviderContext.set(new TooltipProviderState(opts));
@@ -44,6 +141,8 @@ export class TooltipProviderState {
     #startTimer = () => {
         const skipDuration = this.opts.skipDelayDuration.current;
         if (skipDuration === 0) {
+            // no grace period — reset immediately so next trigger waits the full delay
+            this.isOpenDelayed = true;
             return;
         }
         else {
@@ -85,9 +184,10 @@ export class TooltipRootState {
     disabled = $derived.by(() => this.opts.disabled.current ?? this.provider.opts.disabled.current);
     ignoreNonKeyboardFocus = $derived.by(() => this.opts.ignoreNonKeyboardFocus.current ??
         this.provider.opts.ignoreNonKeyboardFocus.current);
+    registry;
+    tether;
     contentNode = $state(null);
     contentPresence;
-    triggerNode = $state(null);
     #wasOpenDelayed = $state(false);
     #timerFn;
     stateAttr = $derived.by(() => {
@@ -98,10 +198,22 @@ export class TooltipRootState {
     constructor(opts, provider) {
         this.opts = opts;
         this.provider = provider;
+        this.tether = opts.tether.current?.state ?? null;
+        this.registry = this.tether?.registry ?? new TooltipTriggerRegistryState();
         this.#timerFn = new TimeoutFn(() => {
             this.#wasOpenDelayed = true;
             this.opts.open.current = true;
         }, this.delayDuration ?? 0);
+        if (this.tether) {
+            this.tether.root = this;
+            onMountEffect(() => {
+                return () => {
+                    if (this.tether?.root === this) {
+                        this.tether.root = null;
+                    }
+                };
+            });
+        }
         this.contentPresence = new PresenceManager({
             open: this.opts.open,
             ref: boxWith(() => this.contentNode),
@@ -119,16 +231,28 @@ export class TooltipRootState {
         });
         watch(() => this.opts.open.current, (isOpen) => {
             if (isOpen) {
+                this.ensureActiveTrigger();
                 this.provider.onOpen(this);
             }
             else {
                 this.provider.onClose(this);
             }
         }, { lazy: true });
+        watch(() => this.opts.triggerId.current, (triggerId) => {
+            if (triggerId === this.registry.activeTriggerId)
+                return;
+            this.registry.setActiveTrigger(triggerId);
+        });
+        watch(() => this.registry.activeTriggerId, (activeTriggerId) => {
+            if (this.opts.triggerId.current === activeTriggerId)
+                return;
+            this.opts.triggerId.current = activeTriggerId;
+        });
     }
     handleOpen = () => {
         this.#timerFn.stop();
         this.#wasOpenDelayed = false;
+        this.ensureActiveTrigger();
         this.opts.open.current = true;
     };
     handleClose = () => {
@@ -141,8 +265,7 @@ export class TooltipRootState {
         const delayDuration = this.delayDuration ?? 0;
         // if no delay needed (either skip delay active or delay is 0), open immediately
         if (shouldSkipDelay || delayDuration === 0) {
-            // set wasOpenDelayed based on whether we actually had a delay
-            this.#wasOpenDelayed = delayDuration > 0 && shouldSkipDelay;
+            this.#wasOpenDelayed = false;
             this.opts.open.current = true;
         }
         else {
@@ -150,7 +273,8 @@ export class TooltipRootState {
             this.#timerFn.start();
         }
     };
-    onTriggerEnter = () => {
+    onTriggerEnter = (triggerId) => {
+        this.setActiveTrigger(triggerId);
         this.#handleDelayedOpen();
     };
     onTriggerLeave = () => {
@@ -161,25 +285,161 @@ export class TooltipRootState {
             this.#timerFn.stop();
         }
     };
+    ensureActiveTrigger = () => {
+        if (this.registry.activeTriggerId !== null &&
+            this.registry.has(this.registry.activeTriggerId)) {
+            return;
+        }
+        if (this.opts.triggerId.current !== null &&
+            this.registry.has(this.opts.triggerId.current)) {
+            this.registry.setActiveTrigger(this.opts.triggerId.current);
+            return;
+        }
+        const firstTriggerId = this.registry.getFirstTriggerId();
+        this.registry.setActiveTrigger(firstTriggerId);
+    };
+    setActiveTrigger = (triggerId) => {
+        this.registry.setActiveTrigger(triggerId);
+    };
+    registerTrigger = (trigger) => {
+        this.registry.register(trigger);
+        if (trigger.disabled &&
+            this.registry.activeTriggerId === trigger.id &&
+            this.opts.open.current) {
+            this.handleClose();
+        }
+    };
+    updateTrigger = (trigger) => {
+        this.registry.update(trigger);
+        if (trigger.disabled &&
+            this.registry.activeTriggerId === trigger.id &&
+            this.opts.open.current) {
+            this.handleClose();
+        }
+    };
+    unregisterTrigger = (id) => {
+        const isActive = this.registry.activeTriggerId === id;
+        this.registry.unregister(id);
+        if (isActive && this.opts.open.current) {
+            this.handleClose();
+        }
+    };
+    isActiveTrigger = (triggerId) => {
+        return this.registry.activeTriggerId === triggerId;
+    };
+    get triggerNode() {
+        return this.registry.activeTriggerNode;
+    }
+    get activePayload() {
+        return this.registry.activePayload;
+    }
+    get activeTriggerId() {
+        return this.registry.activeTriggerId;
+    }
 }
 export class TooltipTriggerState {
     static create(opts) {
-        return new TooltipTriggerState(opts, TooltipRootContext.get());
+        if (opts.tether.current) {
+            return new TooltipTriggerState(opts, null, opts.tether.current.state);
+        }
+        return new TooltipTriggerState(opts, TooltipRootContext.get(), null);
     }
     opts;
     root;
+    tether;
     attachment;
     #isPointerDown = simpleBox(false);
     #hasPointerMoveOpened = $state(false);
-    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.disabled);
     domContext;
     #transitCheckTimeout = null;
-    constructor(opts, root) {
+    #mounted = false;
+    #lastRegisteredId = null;
+    constructor(opts, root, tether) {
         this.opts = opts;
         this.root = root;
+        this.tether = tether;
         this.domContext = new DOMContext(opts.ref);
-        this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
+        this.attachment = attachRef(this.opts.ref, (v) => this.#register(v));
+        watch(() => this.opts.id.current, () => {
+            this.#register(this.opts.ref.current);
+        });
+        watch(() => this.opts.payload.current, () => {
+            this.#register(this.opts.ref.current);
+        });
+        watch(() => this.opts.disabled.current, () => {
+            this.#register(this.opts.ref.current);
+        });
+        onMountEffect(() => {
+            this.#mounted = true;
+            this.#register(this.opts.ref.current);
+            return () => {
+                const root = this.#getRoot();
+                const id = this.#lastRegisteredId;
+                if (id) {
+                    if (this.tether) {
+                        this.tether.registry.unregister(id);
+                    }
+                    else {
+                        root?.unregisterTrigger(id);
+                    }
+                }
+                this.#lastRegisteredId = null;
+                this.#mounted = false;
+            };
+        });
     }
+    #getRoot = () => {
+        return this.tether?.root ?? this.root;
+    };
+    #isDisabled = () => {
+        const root = this.#getRoot();
+        return this.opts.disabled.current || Boolean(root?.disabled);
+    };
+    #register = (node) => {
+        if (!this.#mounted)
+            return;
+        const id = this.opts.id.current;
+        const payload = this.opts.payload.current;
+        const disabled = this.opts.disabled.current;
+        if (this.#lastRegisteredId && this.#lastRegisteredId !== id) {
+            const root = this.#getRoot();
+            if (this.tether) {
+                this.tether.registry.unregister(this.#lastRegisteredId);
+            }
+            else {
+                root?.unregisterTrigger(this.#lastRegisteredId);
+            }
+        }
+        const triggerRecord = {
+            id,
+            node,
+            payload,
+            disabled,
+        };
+        const root = this.#getRoot();
+        if (this.tether) {
+            if (this.tether.registry.has(id)) {
+                this.tether.registry.update(triggerRecord);
+            }
+            else {
+                this.tether.registry.register(triggerRecord);
+            }
+            if (disabled &&
+                this.tether.registry.activeTriggerId === id &&
+                root?.opts.open.current) {
+                root.handleClose();
+            }
+        }
+        else {
+            if (root?.registry.has(id)) {
+                root.updateTrigger(triggerRecord);
+            }
+            else {
+                root?.registerTrigger(triggerRecord);
+            }
+        }
+        this.#lastRegisteredId = id;
+    };
     #clearTransitCheck = () => {
         if (this.#transitCheckTimeout !== null) {
             clearTimeout(this.#transitCheckTimeout);
@@ -190,12 +450,12 @@ export class TooltipTriggerState {
         this.#isPointerDown.current = false;
     };
     #onpointerup = () => {
-        if (this.#isDisabled)
+        if (this.#isDisabled())
             return;
         this.#isPointerDown.current = false;
     };
     #onpointerdown = () => {
-        if (this.#isDisabled)
+        if (this.#isDisabled())
             return;
         this.#isPointerDown.current = true;
         this.domContext.getDocument().addEventListener("pointerup", () => {
@@ -203,94 +463,133 @@ export class TooltipTriggerState {
         }, { once: true });
     };
     #onpointerenter = (e) => {
-        if (this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root)
             return;
+        if (this.#isDisabled()) {
+            if (root.opts.open.current) {
+                root.handleClose();
+            }
+            return;
+        }
         if (e.pointerType === "touch")
             return;
         // if in transit, wait briefly to see if user is actually heading to old content or staying here
-        if (this.root.provider.isPointerInTransit.current) {
+        if (root.provider.isPointerInTransit.current) {
             this.#clearTransitCheck();
             this.#transitCheckTimeout = window.setTimeout(() => {
                 // if still in transit after delay, user is likely staying on this trigger
-                if (this.root.provider.isPointerInTransit.current) {
-                    this.root.provider.isPointerInTransit.current = false;
-                    this.root.onTriggerEnter();
+                if (root.provider.isPointerInTransit.current) {
+                    root.provider.isPointerInTransit.current = false;
+                    root.onTriggerEnter(this.opts.id.current);
                     this.#hasPointerMoveOpened = true;
                 }
             }, 250);
             return;
         }
-        this.root.onTriggerEnter();
+        root.onTriggerEnter(this.opts.id.current);
         this.#hasPointerMoveOpened = true;
     };
     #onpointermove = (e) => {
-        if (this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root)
             return;
+        if (this.#isDisabled()) {
+            if (root.opts.open.current) {
+                root.handleClose();
+            }
+            return;
+        }
         if (e.pointerType === "touch")
             return;
         if (this.#hasPointerMoveOpened)
             return;
         // moving within trigger means we're definitely not in transit anymore
         this.#clearTransitCheck();
-        this.root.provider.isPointerInTransit.current = false;
-        this.root.onTriggerEnter();
+        root.provider.isPointerInTransit.current = false;
+        root.onTriggerEnter(this.opts.id.current);
         this.#hasPointerMoveOpened = true;
     };
     #onpointerleave = (e) => {
-        if (this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root)
+            return;
+        if (this.#isDisabled())
             return;
         this.#clearTransitCheck();
-        const relatedTarget = e.relatedTarget;
-        if (!this.root.disableHoverableContent &&
-            this.root.opts.open.current &&
-            isElement(relatedTarget) &&
-            this.root.contentNode &&
-            !this.root.contentNode.contains(relatedTarget)) {
-            this.root.handleClose();
+        if (!root.isActiveTrigger(this.opts.id.current)) {
+            this.#hasPointerMoveOpened = false;
+            return;
         }
-        else {
-            this.root.onTriggerLeave();
+        const relatedTarget = e.relatedTarget;
+        // when moving to a sibling trigger and skip delay is active, don't close —
+        // the sibling's enter handler will switch the active trigger instantly.
+        // if skipDelayDuration is 0 there's no grace period, so let the tooltip
+        // close and make the sibling wait through the full delay (and re-animate).
+        if (isElement(relatedTarget) && root.provider.opts.skipDelayDuration.current > 0) {
+            for (const record of root.registry.triggers.values()) {
+                if (record.node === relatedTarget) {
+                    this.#hasPointerMoveOpened = false;
+                    return;
+                }
+            }
         }
+        root.onTriggerLeave();
         this.#hasPointerMoveOpened = false;
     };
     #onfocus = (e) => {
-        if (this.#isPointerDown.current || this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root)
+            return;
+        if (this.#isPointerDown.current)
             return;
-        if (this.root.ignoreNonKeyboardFocus && !isFocusVisible(e.currentTarget))
+        if (this.#isDisabled()) {
+            if (root.opts.open.current) {
+                root.handleClose();
+            }
+            return;
+        }
+        if (root.ignoreNonKeyboardFocus && !isFocusVisible(e.currentTarget))
             return;
-        this.root.handleOpen();
+        root.setActiveTrigger(this.opts.id.current);
+        root.handleOpen();
     };
     #onblur = () => {
-        if (this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root || this.#isDisabled())
             return;
-        this.root.handleClose();
+        root.handleClose();
     };
     #onclick = () => {
-        if (this.root.disableCloseOnTriggerClick || this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root || root.disableCloseOnTriggerClick || this.#isDisabled())
             return;
-        this.root.handleClose();
+        root.handleClose();
     };
-    props = $derived.by(() => ({
-        id: this.opts.id.current,
-        "aria-describedby": this.root.opts.open.current
-            ? this.root.contentNode?.id
-            : undefined,
-        "data-state": this.root.stateAttr,
-        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
-        "data-delay-duration": `${this.root.delayDuration}`,
-        [tooltipAttrs.trigger]: "",
-        tabindex: this.#isDisabled ? undefined : this.opts.tabindex.current,
-        disabled: this.opts.disabled.current,
-        onpointerup: this.#onpointerup,
-        onpointerdown: this.#onpointerdown,
-        onpointerenter: this.#onpointerenter,
-        onpointermove: this.#onpointermove,
-        onpointerleave: this.#onpointerleave,
-        onfocus: this.#onfocus,
-        onblur: this.#onblur,
-        onclick: this.#onclick,
-        ...this.attachment,
-    }));
+    props = $derived.by(() => {
+        const root = this.#getRoot();
+        const isOpenForTrigger = Boolean(root?.opts.open.current && root.isActiveTrigger(this.opts.id.current));
+        const isDisabled = this.#isDisabled();
+        return {
+            id: this.opts.id.current,
+            "aria-describedby": isOpenForTrigger ? root?.contentNode?.id : undefined,
+            "data-state": isOpenForTrigger ? root?.stateAttr : "closed",
+            "data-disabled": boolToEmptyStrOrUndef(isDisabled),
+            "data-delay-duration": `${root?.delayDuration ?? 0}`,
+            [tooltipAttrs.trigger]: "",
+            tabindex: isDisabled ? undefined : this.opts.tabindex.current,
+            disabled: this.opts.disabled.current,
+            onpointerup: this.#onpointerup,
+            onpointerdown: this.#onpointerdown,
+            onpointerenter: this.#onpointerenter,
+            onpointermove: this.#onpointermove,
+            onpointerleave: this.#onpointerleave,
+            onfocus: this.#onfocus,
+            onblur: this.#onblur,
+            onclick: this.#onclick,
+            ...this.attachment,
+        };
+    });
 }
 export class TooltipContentState {
     static create(opts) {
@@ -299,30 +598,34 @@ export class TooltipContentState {
     opts;
     root;
     attachment;
-    #safePolygon = null;
-    #createSafePolygon = () => {
-        if (this.#safePolygon)
-            return;
-        this.#safePolygon = new SafePolygon({
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
+        new SafePolygon({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
             enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
+            ignoredTargets: () => {
+                // only skip closing for sibling triggers when there's a skip-delay grace period;
+                // with skipDelayDuration=0 the close+reopen is intentional (full delay + re-animation)
+                if (this.root.provider.opts.skipDelayDuration.current === 0)
+                    return [];
+                const nodes = [];
+                const activeTriggerNode = this.root.triggerNode;
+                for (const record of this.root.registry.triggers.values()) {
+                    if (record.node && record.node !== activeTriggerNode) {
+                        nodes.push(record.node);
+                    }
+                }
+                return nodes;
+            },
             onPointerExit: () => {
                 if (this.root.provider.isTooltipOpen(this.root)) {
                     this.root.handleClose();
                 }
             },
         });
-    };
-    constructor(opts, root) {
-        this.opts = opts;
-        this.root = root;
-        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
-        watch(() => this.root.opts.open.current && !this.root.disableHoverableContent, (shouldTrackSafePolygon) => {
-            if (!shouldTrackSafePolygon)
-                return;
-            this.#createSafePolygon();
-        }, { lazy: true });
     }
     onInteractOutside = (e) => {
         if (isElement(e.target) &&

package/dist/bits/tooltip/types.d.ts

@@ -2,10 +2,18 @@ import type { FloatingLayerContentProps } from "../utilities/floating-layer/type
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
 import type { DismissibleLayerProps } from "../utilities/dismissible-layer/types.js";
 import type { EscapeLayerProps } from "../utilities/escape-layer/types.js";
+import type { Snippet } from "svelte";
 import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
 import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { PortalProps } from "../utilities/portal/types.js";
 import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+import type { TooltipTether as TooltipTetherImpl } from "./tooltip.svelte.js";
+export type TooltipTether<Payload = never> = TooltipTetherImpl<Payload>;
+export type TooltipRootSnippetProps<Payload = never> = {
+    open: boolean;
+    triggerId: string | null;
+    payload: [Payload] extends [never] ? null : Payload | null;
+};
 export type TooltipProviderPropsWithoutHTML = WithChildren<{
     /**
      * The delay in milliseconds before the tooltip opens.
@@ -46,7 +54,7 @@ export type TooltipProviderPropsWithoutHTML = WithChildren<{
     ignoreNonKeyboardFocus?: boolean;
 }>;
 export type TooltipProviderProps = TooltipProviderPropsWithoutHTML;
-export type TooltipRootPropsWithoutHTML = WithChildren<{
+export type TooltipRootPropsWithoutHTML<Payload = never> = Omit<WithChildren<{
     /**
      * The open state of the tooltip.
      *
@@ -92,8 +100,18 @@ export type TooltipRootPropsWithoutHTML = WithChildren<{
      * @defaultValue false
      */
     ignoreNonKeyboardFocus?: boolean;
-}>;
-export type TooltipRootProps = TooltipRootPropsWithoutHTML;
+    /**
+     * The active trigger id for controlled single tooltip mode.
+     */
+    triggerId?: string | null;
+    /**
+     * Shared tether used to connect detached triggers and infer payload types.
+     */
+    tether?: TooltipTether<Payload> | undefined;
+}>, "children"> & {
+    children?: Snippet | Snippet<[TooltipRootSnippetProps<Payload>]>;
+};
+export type TooltipRootProps<Payload = never> = TooltipRootPropsWithoutHTML<Payload>;
 export type TooltipContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<FloatingLayerContentProps, "content" | "preventScroll"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
     /**
      * When `true`, the tooltip will be forced to mount in the DOM.
@@ -116,12 +134,20 @@ export type TooltipArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type TooltipArrowProps = ArrowProps;
 export type TooltipPortalPropsWithoutHTML = PortalProps;
 export type TooltipPortalProps = PortalProps;
-export type TooltipTriggerPropsWithoutHTML = WithChild<{
+export type TooltipTriggerPropsWithoutHTML<Payload = never> = WithChild<{
     /**
      * Whether the tooltip trigger is disabled or not.
      *
      * @defaultValue false
      */
     disabled?: boolean | null | undefined;
+    /**
+     * Payload for the trigger used by singleton tooltip root snippets.
+     */
+    payload?: [Payload] extends [never] ? unknown : Payload;
+    /**
+     * Shared tether used to connect detached triggers and infer payload types.
+     */
+    tether?: TooltipTether<Payload> | undefined;
 }>;
-export type TooltipTriggerProps = TooltipTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, TooltipTriggerPropsWithoutHTML>;
+export type TooltipTriggerProps<Payload = never> = TooltipTriggerPropsWithoutHTML<Payload> & Without<BitsPrimitiveButtonAttributes, TooltipTriggerPropsWithoutHTML<Payload>>;

package/dist/internal/safe-polygon.svelte.d.ts

@@ -5,7 +5,8 @@ export interface SafePolygonOptions {
     contentNode: Getter<HTMLElement | null>;
     onPointerExit: () => void;
     buffer?: number;
-    throttlePointerMove?: boolean;
+    /** nodes that should not trigger a close when they become the relatedTarget on trigger leave (e.g. sibling triggers in singleton mode) */
+    ignoredTargets?: Getter<HTMLElement[]>;
 }
 /**
  * Creates a safe polygon area that allows users to move their cursor between

package/dist/internal/safe-polygon.svelte.js

@@ -46,10 +46,6 @@ export class SafePolygon {
     #exitPoint = null;
     // tracks what we're moving toward: "content" when leaving trigger, "trigger" when leaving content
     #exitTarget = null;
-    #triggerRect = null;
-    #contentRect = null;
-    #pointerMoveRafId = null;
-    #pendingClientPoint = null;
     #leaveFallbackRafId = null;
     #cancelLeaveFallback() {
         if (this.#leaveFallbackRafId !== null) {
@@ -67,15 +63,6 @@ export class SafePolygon {
             this.#opts.onPointerExit();
         });
     }
-    #closeIfPointerEnteredOutside(target, triggerNode, contentNode) {
-        if (!isElement(target))
-            return false;
-        if (triggerNode.contains(target) || contentNode.contains(target))
-            return false;
-        this.#clearTracking();
-        this.#opts.onPointerExit();
-        return true;
-    }
     constructor(opts) {
         this.#opts = opts;
         this.#buffer = opts.buffer ?? 1;
@@ -86,12 +73,7 @@ export class SafePolygon {
             }
             const doc = getDocument(triggerNode);
             const handlePointerMove = (e) => {
-                if (this.#opts.throttlePointerMove) {
-                    this.#onPointerMoveThrottled(e, triggerNode, contentNode);
-                }
-                else {
-                    this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode);
-                }
+                this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode);
             };
             const handleTriggerLeave = (e) => {
                 // when leaving trigger toward content, record exit point
@@ -100,12 +82,25 @@ export class SafePolygon {
                 if (isElement(target) && contentNode.contains(target)) {
                     return;
                 }
-                if (this.#closeIfPointerEnteredOutside(target, triggerNode, contentNode)) {
+                // if moving to an ignored target (e.g. a sibling trigger), don't close —
+                // the sibling's enter handler will take over
+                const ignoredTargets = this.#opts.ignoredTargets?.() ?? [];
+                if (isElement(target) &&
+                    ignoredTargets.some((n) => n === target || n.contains(target))) {
+                    return;
+                }
+                // if relatedTarget is completely unrelated to the floating tree
+                // (not an ancestor of content, not inside content/trigger), close now
+                if (isElement(target) &&
+                    !triggerNode.contains(target) &&
+                    !contentNode.contains(target) &&
+                    !target.contains(contentNode)) {
+                    this.#clearTracking();
+                    this.#opts.onPointerExit();
                     return;
                 }
                 this.#exitPoint = [e.clientX, e.clientY];
                 this.#exitTarget = "content";
-                this.#captureRects(triggerNode, contentNode);
                 this.#scheduleLeaveFallback();
             };
             const handleTriggerEnter = () => {
@@ -123,13 +118,9 @@ export class SafePolygon {
                     // going directly to trigger, no polygon tracking needed
                     return;
                 }
-                if (this.#closeIfPointerEnteredOutside(target, triggerNode, contentNode)) {
-                    return;
-                }
-                // might be traversing gap back to trigger, set up polygon tracking
+                // set up polygon tracking toward trigger — pointermove decides whether to close
                 this.#exitPoint = [e.clientX, e.clientY];
                 this.#exitTarget = "trigger";
-                this.#captureRects(triggerNode, contentNode);
                 this.#scheduleLeaveFallback();
             };
             return [
@@ -144,33 +135,13 @@ export class SafePolygon {
             }, () => { });
         });
     }
-    #onPointerMoveThrottled(e, triggerNode, contentNode) {
-        if (this.#pointerMoveRafId === null) {
-            // handle the first move in the frame immediately so close checks
-            // are not deferred when only a single pointermove fires.
-            this.#pointerMoveRafId = requestAnimationFrame(() => {
-                this.#pointerMoveRafId = null;
-                const point = this.#pendingClientPoint;
-                this.#pendingClientPoint = null;
-                if (!point)
-                    return;
-                this.#onPointerMove(point, triggerNode, contentNode);
-            });
-            this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode);
-            return;
-        }
-        this.#pendingClientPoint = [e.clientX, e.clientY];
-    }
     #onPointerMove(clientPoint, triggerNode, contentNode) {
         // if no exit point recorded, nothing to check
         if (!this.#exitPoint || !this.#exitTarget)
             return;
         this.#cancelLeaveFallback();
-        if (!this.#triggerRect || !this.#contentRect) {
-            this.#captureRects(triggerNode, contentNode);
-        }
-        const triggerRect = this.#triggerRect ?? triggerNode.getBoundingClientRect();
-        const contentRect = this.#contentRect ?? contentNode.getBoundingClientRect();
+        const triggerRect = triggerNode.getBoundingClientRect();
+        const contentRect = contentNode.getBoundingClientRect();
         // check if pointer reached the target
         if (this.#exitTarget === "content" && isInsideRect(clientPoint, contentRect)) {
             this.#clearTracking();
@@ -196,20 +167,9 @@ export class SafePolygon {
         this.#clearTracking();
         this.#opts.onPointerExit();
     }
-    #captureRects(triggerNode, contentNode) {
-        this.#triggerRect = triggerNode.getBoundingClientRect();
-        this.#contentRect = contentNode.getBoundingClientRect();
-    }
     #clearTracking() {
         this.#exitPoint = null;
         this.#exitTarget = null;
-        this.#triggerRect = null;
-        this.#contentRect = null;
-        this.#pendingClientPoint = null;
-        if (this.#pointerMoveRafId !== null) {
-            cancelAnimationFrame(this.#pointerMoveRafId);
-            this.#pointerMoveRafId = null;
-        }
         this.#cancelLeaveFallback();
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.15.8",
+  "version": "2.16.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",