@data-slot/tooltip 0.2.4 → 0.2.6

package/README.md

@@ -13,7 +13,7 @@ npm install @data-slot/tooltip
 ```html
 <div data-slot="tooltip">
   <button data-slot="tooltip-trigger">Hover me</button>
-  <div data-slot="tooltip-content" role="tooltip" hidden>
+  <div data-slot="tooltip-content" hidden>
     Helpful tooltip text
   </div>
 </div>
@@ -47,7 +47,8 @@ import { createTooltip } from "@data-slot/tooltip";
 const tooltip = createTooltip(element, {
   delay: 300,
   skipDelayDuration: 300,
-  position: "top",
+  side: "top",
+  align: "center",
   onOpenChange: (open) => console.log(open),
 });
 ```
@@ -57,48 +58,84 @@ const tooltip = createTooltip(element, {
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `delay` | `number` | `300` | Delay before showing tooltip (ms) |
-| `skipDelayDuration` | `number` | `300` | Duration to skip delay after closing (ms). Set to `0` to disable. |
-| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Position relative to trigger |
+| `skipDelayDuration` | `number` | `300` | Duration to skip delay after closing (ms). Set to `0` to disable warm-up. |
+| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"top"` | Side of tooltip relative to trigger (bind-time only) |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Alignment along the side (bind-time only) |
 | `onOpenChange` | `(open: boolean) => void` | `undefined` | Callback when visibility changes |
 
+**Note:** `side` and `align` are resolved once at bind time. To change placement dynamically, destroy and recreate the tooltip with new options.
+
+### Data Attributes
+
+Options can also be set via data attributes. JS options take precedence.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data-delay` | number | `300` | Delay before showing tooltip (ms) |
+| `data-skip-delay-duration` | number | `300` | Duration to skip delay after closing (ms) |
+| `data-side` | string | `"top"` | Side relative to trigger (checked on content first, then root) |
+| `data-align` | string | `"center"` | Alignment along the side (checked on content first, then root) |
+
+```html
+<!-- Tooltip with faster response -->
+<div data-slot="tooltip" data-delay="100">
+  ...
+</div>
+
+<!-- Disable warm-up behavior -->
+<div data-slot="tooltip" data-skip-delay-duration="0">
+  ...
+</div>
+
+<!-- Side/align on content element -->
+<div data-slot="tooltip-content" data-side="bottom" data-align="start">
+  ...
+</div>
+```
+
 ### Controller
 
 | Method/Property | Description |
 |-----------------|-------------|
-| `show()` | Show the tooltip immediately |
+| `show()` | Show the tooltip immediately. Respects disabled state. |
 | `hide()` | Hide the tooltip |
 | `isOpen` | Current visibility state (readonly `boolean`) |
-| `destroy()` | Cleanup all event listeners |
+| `destroy()` | Cleanup all event listeners and timers |
 
 ## Markup Structure
 
 ```html
 <div data-slot="tooltip">
   <button data-slot="tooltip-trigger">Trigger</button>
-  <div data-slot="tooltip-content" role="tooltip">Content</div>
+  <div data-slot="tooltip-content">Content</div>
 </div>
 ```
 
 Both `tooltip-trigger` and `tooltip-content` are required.
 
-### Data Attributes
+### Output Attributes
 
-Set position via HTML:
+The component sets these attributes automatically:
 
-```html
-<div data-slot="tooltip-content" data-position="bottom" role="tooltip">
-```
+| Element | Attribute | Values |
+|---------|-----------|--------|
+| Root | `data-state` | `"open"` \| `"closed"` |
+| Content | `data-state` | `"open"` \| `"closed"` |
+| Content | `data-side` | `"top"` \| `"right"` \| `"bottom"` \| `"left"` |
+| Content | `data-align` | `"start"` \| `"center"` \| `"end"` |
+| Content | `role` | `"tooltip"` |
+| Content | `aria-hidden` | `"true"` when closed, `"false"` when open |
+| Trigger | `aria-describedby` | Content ID when open, removed when closed |
 
 ## Styling
 
-### Basic Styling
+This tooltip uses simple CSS positioning and is not collision-aware. Visibility is controlled entirely via CSS using the `data-state` attribute.
 
-```css
-/* Hidden state */
-[data-slot="tooltip-content"][hidden] {
-  display: none;
-}
+### Recommended CSS
+
+The visibility transition trick keeps the tooltip visible during fade-out, then becomes non-focusable after the transition completes—no JS timers needed.
 
+```css
 /* Positioning */
 [data-slot="tooltip"] {
   position: relative;
@@ -107,67 +144,83 @@ Set position via HTML:
 [data-slot="tooltip-content"] {
   position: absolute;
   white-space: nowrap;
+  /* Hidden by default */
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  /* Visibility delays hiding until after opacity fades */
+  transition: opacity 0.15s, visibility 0s linear 0.15s;
 }
 
-[data-slot="tooltip-content"][data-position="top"] {
+/* Open state */
+[data-slot="tooltip"][data-state="open"] [data-slot="tooltip-content"] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+/* Side positioning */
+[data-slot="tooltip-content"][data-side="top"] {
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   margin-bottom: 8px;
 }
 
-[data-slot="tooltip-content"][data-position="bottom"] {
+[data-slot="tooltip-content"][data-side="bottom"] {
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   margin-top: 8px;
 }
 
-[data-slot="tooltip-content"][data-position="left"] {
+[data-slot="tooltip-content"][data-side="left"] {
   right: 100%;
   top: 50%;
   transform: translateY(-50%);
   margin-right: 8px;
 }
 
-[data-slot="tooltip-content"][data-position="right"] {
+[data-slot="tooltip-content"][data-side="right"] {
   left: 100%;
   top: 50%;
   transform: translateY(-50%);
   margin-left: 8px;
 }
-```
-
-### Animations
 
-```css
-[data-slot="tooltip-content"] {
-  opacity: 0;
-  transition: opacity 0.15s;
+/* Alignment (example for top/bottom sides) */
+[data-slot="tooltip-content"][data-side="top"][data-align="start"],
+[data-slot="tooltip-content"][data-side="bottom"][data-align="start"] {
+  left: 0;
+  transform: none;
 }
 
-[data-slot="tooltip"][data-state="open"] [data-slot="tooltip-content"] {
-  opacity: 1;
-}
-
-/* Skip transition during warm-up (instant show) */
-[data-slot="tooltip-content"][data-instant] {
-  transition: none;
+[data-slot="tooltip-content"][data-side="top"][data-align="end"],
+[data-slot="tooltip-content"][data-side="bottom"][data-align="end"] {
+  left: auto;
+  right: 0;
+  transform: none;
 }
 ```
 
 ### Tailwind Example
 
+Use `group` on the root and `group-data-[state=open]:` for open state styles:
+
 ```html
-<div data-slot="tooltip" class="relative inline-block group">
+<div data-slot="tooltip" class="group relative inline-block">
   <button data-slot="tooltip-trigger">
     Hover me
   </button>
   <div 
     data-slot="tooltip-content" 
-    data-position="top"
-    role="tooltip"
-    class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-sm rounded opacity-0 group-data-[state=open]:opacity-100 transition-opacity pointer-events-none"
+    data-side="top"
+    class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 
+           bg-gray-900 text-white text-sm rounded 
+           opacity-0 pointer-events-none transition-opacity duration-150
+           group-data-[state=open]:opacity-100 
+           group-data-[state=open]:pointer-events-auto"
   >
     Tooltip text
   </div>
@@ -180,25 +233,40 @@ When a user closes one tooltip and quickly hovers another, the second tooltip sh
 
 - Controlled by `skipDelayDuration` option
 - Set to `0` to disable this behavior
-- The `data-instant` attribute is set when showing instantly (use to skip CSS transitions)
+- Warm-up only skips the delay, not CSS transitions
+- Warm window is set only when a tooltip actually closes (not when a pending open is cancelled)
 
 ## Accessibility
 
 The component automatically handles:
 
 - `role="tooltip"` on content
-- `aria-describedby` linking trigger to content
-- Unique ID generation for content
+- `aria-describedby` on trigger only when open (prevents stale announcements)
+- `aria-hidden` on content: explicit `"true"`/`"false"` for consistent AT behavior
+- Unique ID generation for content via `ensureId`
+
+### Disabled Triggers
+
+If the trigger has `disabled` attribute or `aria-disabled="true"`:
+- Pointer and focus events will not open the tooltip
+- Programmatic `.show()` also respects the disabled state
 
-## Keyboard & Interaction
+## Interaction Model
 
-| Action | Behavior |
-|--------|----------|
-| Mouse enter | Show after delay |
-| Mouse leave | Hide immediately |
+| Input | Behavior |
+|-------|----------|
+| Pointer enter trigger (mouse/pen) | Show after delay |
+| Pointer leave trigger | Hide immediately (unless entering content) |
+| Pointer enter content | Keep open (hoverable content) |
+| Pointer leave content | Hide immediately (unless entering trigger) |
+| Touch hover | Ignored (focus-only on touch devices) |
 | Focus | Show after delay |
 | Blur | Hide immediately |
-| `Escape` | Hide immediately |
+| `Escape` | Hide immediately (listener only active when open) |
+
+**Hoverable Content:** Moving the pointer from trigger to content (or vice versa) keeps the tooltip open. This allows users to interact with links or selectable text in tooltips.
+
+**Focus Priority:** While the trigger has keyboard focus, the tooltip stays open even if the pointer leaves. This prevents jarring closures during keyboard navigation.
 
 ## Events
 
@@ -206,11 +274,20 @@ Listen for changes via custom events:
 
 ```javascript
 element.addEventListener("tooltip:change", (e) => {
-  console.log("Tooltip visible:", e.detail.open);
+  const { open, trigger, content, reason } = e.detail;
+  console.log(`Tooltip ${open ? 'opened' : 'closed'} via ${reason}`);
 });
 ```
 
+### Event Detail
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `open` | `boolean` | Current visibility state |
+| `trigger` | `HTMLElement` | The trigger element |
+| `content` | `HTMLElement` | The content element |
+| `reason` | `string` | What caused the change: `"pointer"`, `"focus"`, `"blur"`, `"escape"`, `"api"` |
+
 ## License
 
 MIT
-

package/dist/index.cjs

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let n=0;const r=(e,t)=>e.id||=`${t}-${++n}`;function i(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const a=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let o=0;const s=300;function c(t,n={}){let{delay:c=300,skipDelayDuration:l=s,onOpenChange:u}=n,d=e(t,`tooltip-trigger`),f=e(t,`tooltip-content`);if(!d||!f)throw Error(`Tooltip requires trigger and content slots`);let p=n.position??f.dataset.position??`top`,m=!1,h=null,g=[],_=r(f,`tooltip-content`);d.setAttribute(`aria-describedby`,_),f.setAttribute(`role`,`tooltip`),f.setAttribute(`data-position`,p);let v=(e,n=!1)=>{m!==e&&(m=e,f.hidden=!m,t.setAttribute(`data-state`,m?`open`:`closed`),n&&m?f.setAttribute(`data-instant`,``):f.removeAttribute(`data-instant`),a(t,`tooltip:change`,{open:m}),u?.(m))},y=()=>{if(h)return;let e=Date.now();if(e<o){v(!0,!0);return}h=setTimeout(()=>{v(!0,!1),h=null},c)},b=()=>{h&&(clearTimeout(h),h=null),m&&l>0&&(o=Date.now()+l),v(!1)};f.hidden=!0,t.setAttribute(`data-state`,`closed`),g.push(i(d,`mouseenter`,y),i(d,`mouseleave`,b),i(d,`focus`,y),i(d,`blur`,b)),g.push(i(document,`keydown`,e=>{m&&e.key===`Escape`&&b()}));let x={show:()=>{h&&(clearTimeout(h),h=null),v(!0)},hide:b,get isOpen(){return m},destroy:()=>{h&&clearTimeout(h),g.forEach(e=>e()),g.length=0}};return x}const l=new WeakSet;function u(e=document){let n=[];for(let r of t(e,`tooltip`)){if(l.has(r))continue;l.add(r),n.push(c(r))}return n}exports.create=u,exports.createTooltip=c;
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){let n=a(e,t);if(n===null||n===``)return;let i=Number(n);if(Number.isNaN(i)||!Number.isFinite(i)){r(e,t,`Invalid number value "${n}" for data-${t}.`);return}return i}function s(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let c=0;const l=(e,t)=>e.id||=`${t}-${++c}`;function u(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const d=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let f=0;const p=[`top`,`right`,`bottom`,`left`],m=[`start`,`center`,`end`];function h(t,n={}){let r=e(t,`tooltip-trigger`),i=e(t,`tooltip-content`);if(!r||!i)throw Error(`Tooltip requires trigger and content slots`);let a=n.delay??o(t,`delay`)??300,c=n.skipDelayDuration??o(t,`skipDelayDuration`)??300,h=n.onOpenChange,g=n.side??s(i,`side`,p)??s(t,`side`,p)??`top`,_=n.align??s(i,`align`,m)??s(t,`align`,m)??`center`,v=!1,y=!1,b=null,x=null,S=[],C=l(i,`tooltip-content`);i.setAttribute(`role`,`tooltip`),i.setAttribute(`data-side`,g),i.setAttribute(`data-align`,_);let w=()=>r.hasAttribute(`disabled`)||r.getAttribute(`aria-disabled`)===`true`,T=()=>{x||=u(document,`keydown`,e=>{e.key===`Escape`&&v&&k(`escape`)})},E=()=>{x?.(),x=null},D=(e,n)=>{if(v===e)return;v=e;let a=v?`open`:`closed`;t.setAttribute(`data-state`,a),i.setAttribute(`data-state`,a),v?(r.setAttribute(`aria-describedby`,C),i.setAttribute(`aria-hidden`,`false`),T()):(r.removeAttribute(`aria-describedby`),i.setAttribute(`aria-hidden`,`true`),E()),d(t,`tooltip:change`,{open:v,trigger:r,content:i,reason:n}),h?.(v)},O=e=>{if(b&&(clearTimeout(b),b=null),Date.now()<f){D(!0,e);return}b=setTimeout(()=>{D(!0,e),b=null},a)},k=e=>{b&&(clearTimeout(b),b=null),v&&c>0&&(f=Date.now()+c),D(!1,e)};i.setAttribute(`aria-hidden`,`true`),t.setAttribute(`data-state`,`closed`),i.setAttribute(`data-state`,`closed`),S.push(u(r,`pointerenter`,e=>{e.pointerType!==`touch`&&(w()||O(`pointer`))}),u(r,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&i.contains(t)||k(`pointer`)}),u(r,`focus`,()=>{y=!0,!w()&&O(`focus`)}),u(r,`blur`,()=>{y=!1,k(`blur`)})),S.push(u(i,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&r.contains(t)||k(`pointer`)}));let A={show:()=>{w()||(b&&(clearTimeout(b),b=null),D(!0,`api`))},hide:()=>k(`api`),get isOpen(){return v},destroy:()=>{b&&clearTimeout(b),E(),S.forEach(e=>e()),S.length=0}};return A}const g=new WeakSet;function _(e=document){let n=[];for(let r of t(e,`tooltip`)){if(g.has(r))continue;g.add(r),n.push(h(r))}return n}exports.create=_,exports.createTooltip=h;

package/dist/index.d.cts

@@ -1,17 +1,21 @@
 //#region src/index.d.ts
-type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+type TooltipSide = "top" | "right" | "bottom" | "left";
+type TooltipAlign = "start" | "center" | "end";
+type TooltipReason = "pointer" | "focus" | "blur" | "escape" | "api";
 interface TooltipOptions {
-  /** Delay before showing tooltip (ms) */
+  /** Delay before showing tooltip (ms). Default: 300 */
   delay?: number;
-  /** Duration to skip delay after closing (ms). Set to 0 to disable warm-up behavior. */
+  /** Duration to skip delay after closing (ms). Set to 0 to disable warm-up. Default: 300 */
   skipDelayDuration?: number;
-  /** Position of tooltip relative to trigger */
-  position?: TooltipPosition;
+  /** Side of tooltip relative to trigger. Default: 'top'. Set at bind time only. */
+  side?: TooltipSide;
+  /** Alignment along the side. Default: 'center'. Set at bind time only. */
+  align?: TooltipAlign;
   /** Callback when visibility changes */
   onOpenChange?: (open: boolean) => void;
 }
 interface TooltipController {
-  /** Show the tooltip */
+  /** Show the tooltip immediately. Respects disabled state. */
   show(): void;
   /** Hide the tooltip */
   hide(): void;
@@ -27,9 +31,25 @@ interface TooltipController {
  * ```html
  * <div data-slot="tooltip">
  *   <button data-slot="tooltip-trigger">Hover me</button>
- *   <div data-slot="tooltip-content" role="tooltip">Tooltip text</div>
+ *   <div data-slot="tooltip-content" data-side="top" data-align="center">
+ *     Tooltip text
+ *   </div>
  * </div>
  * ```
+ *
+ * Data attributes (checked on content first, then root):
+ * - `data-side`: 'top' | 'right' | 'bottom' | 'left' (bind-time only)
+ * - `data-align`: 'start' | 'center' | 'end' (bind-time only)
+ * - `data-delay`: number (ms)
+ * - `data-skip-delay-duration`: number (ms)
+ *
+ * Note: side and align are resolved once at bind time. To change placement,
+ * destroy and recreate the tooltip with new options.
+ *
+ * This tooltip uses simple CSS positioning (not collision-aware).
+ * Opens on hover (non-touch) and focus. Touch devices: focus-only.
+ * Content is hoverable: moving pointer from trigger to content keeps it open.
+ * Tooltip stays open while trigger has focus, even if pointer leaves.
  */
 declare function createTooltip(root: Element, options?: TooltipOptions): TooltipController;
 /**
@@ -38,4 +58,4 @@ declare function createTooltip(root: Element, options?: TooltipOptions): Tooltip
  */
 declare function create(scope?: ParentNode): TooltipController[];
 //#endregion
-export { TooltipController, TooltipOptions, TooltipPosition, create, createTooltip };
+export { TooltipAlign, TooltipController, TooltipOptions, TooltipReason, TooltipSide, create, createTooltip };

package/dist/index.d.ts

@@ -1,17 +1,21 @@
 //#region src/index.d.ts
-type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+type TooltipSide = "top" | "right" | "bottom" | "left";
+type TooltipAlign = "start" | "center" | "end";
+type TooltipReason = "pointer" | "focus" | "blur" | "escape" | "api";
 interface TooltipOptions {
-  /** Delay before showing tooltip (ms) */
+  /** Delay before showing tooltip (ms). Default: 300 */
   delay?: number;
-  /** Duration to skip delay after closing (ms). Set to 0 to disable warm-up behavior. */
+  /** Duration to skip delay after closing (ms). Set to 0 to disable warm-up. Default: 300 */
   skipDelayDuration?: number;
-  /** Position of tooltip relative to trigger */
-  position?: TooltipPosition;
+  /** Side of tooltip relative to trigger. Default: 'top'. Set at bind time only. */
+  side?: TooltipSide;
+  /** Alignment along the side. Default: 'center'. Set at bind time only. */
+  align?: TooltipAlign;
   /** Callback when visibility changes */
   onOpenChange?: (open: boolean) => void;
 }
 interface TooltipController {
-  /** Show the tooltip */
+  /** Show the tooltip immediately. Respects disabled state. */
   show(): void;
   /** Hide the tooltip */
   hide(): void;
@@ -27,9 +31,25 @@ interface TooltipController {
  * ```html
  * <div data-slot="tooltip">
  *   <button data-slot="tooltip-trigger">Hover me</button>
- *   <div data-slot="tooltip-content" role="tooltip">Tooltip text</div>
+ *   <div data-slot="tooltip-content" data-side="top" data-align="center">
+ *     Tooltip text
+ *   </div>
  * </div>
  * ```
+ *
+ * Data attributes (checked on content first, then root):
+ * - `data-side`: 'top' | 'right' | 'bottom' | 'left' (bind-time only)
+ * - `data-align`: 'start' | 'center' | 'end' (bind-time only)
+ * - `data-delay`: number (ms)
+ * - `data-skip-delay-duration`: number (ms)
+ *
+ * Note: side and align are resolved once at bind time. To change placement,
+ * destroy and recreate the tooltip with new options.
+ *
+ * This tooltip uses simple CSS positioning (not collision-aware).
+ * Opens on hover (non-touch) and focus. Touch devices: focus-only.
+ * Content is hoverable: moving pointer from trigger to content keeps it open.
+ * Tooltip stays open while trigger has focus, even if pointer leaves.
  */
 declare function createTooltip(root: Element, options?: TooltipOptions): TooltipController;
 /**
@@ -38,4 +58,4 @@ declare function createTooltip(root: Element, options?: TooltipOptions): Tooltip
  */
 declare function create(scope?: ParentNode): TooltipController[];
 //#endregion
-export { TooltipController, TooltipOptions, TooltipPosition, create, createTooltip };
+export { TooltipAlign, TooltipController, TooltipOptions, TooltipReason, TooltipSide, create, createTooltip };

package/dist/index.js

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let n=0;const r=(e,t)=>e.id||=`${t}-${++n}`;function i(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const a=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let o=0;const s=300;function c(t,n={}){let{delay:c=300,skipDelayDuration:l=s,onOpenChange:u}=n,d=e(t,`tooltip-trigger`),f=e(t,`tooltip-content`);if(!d||!f)throw Error(`Tooltip requires trigger and content slots`);let p=n.position??f.dataset.position??`top`,m=!1,h=null,g=[],_=r(f,`tooltip-content`);d.setAttribute(`aria-describedby`,_),f.setAttribute(`role`,`tooltip`),f.setAttribute(`data-position`,p);let v=(e,n=!1)=>{m!==e&&(m=e,f.hidden=!m,t.setAttribute(`data-state`,m?`open`:`closed`),n&&m?f.setAttribute(`data-instant`,``):f.removeAttribute(`data-instant`),a(t,`tooltip:change`,{open:m}),u?.(m))},y=()=>{if(h)return;let e=Date.now();if(e<o){v(!0,!0);return}h=setTimeout(()=>{v(!0,!1),h=null},c)},b=()=>{h&&(clearTimeout(h),h=null),m&&l>0&&(o=Date.now()+l),v(!1)};f.hidden=!0,t.setAttribute(`data-state`,`closed`),g.push(i(d,`mouseenter`,y),i(d,`mouseleave`,b),i(d,`focus`,y),i(d,`blur`,b)),g.push(i(document,`keydown`,e=>{m&&e.key===`Escape`&&b()}));let x={show:()=>{h&&(clearTimeout(h),h=null),v(!0)},hide:b,get isOpen(){return m},destroy:()=>{h&&clearTimeout(h),g.forEach(e=>e()),g.length=0}};return x}const l=new WeakSet;function u(e=document){let n=[];for(let r of t(e,`tooltip`)){if(l.has(r))continue;l.add(r),n.push(c(r))}return n}export{u as create,c as createTooltip};
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){let n=a(e,t);if(n===null||n===``)return;let i=Number(n);if(Number.isNaN(i)||!Number.isFinite(i)){r(e,t,`Invalid number value "${n}" for data-${t}.`);return}return i}function s(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let c=0;const l=(e,t)=>e.id||=`${t}-${++c}`;function u(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const d=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let f=0;const p=[`top`,`right`,`bottom`,`left`],m=[`start`,`center`,`end`];function h(t,n={}){let r=e(t,`tooltip-trigger`),i=e(t,`tooltip-content`);if(!r||!i)throw Error(`Tooltip requires trigger and content slots`);let a=n.delay??o(t,`delay`)??300,c=n.skipDelayDuration??o(t,`skipDelayDuration`)??300,h=n.onOpenChange,g=n.side??s(i,`side`,p)??s(t,`side`,p)??`top`,_=n.align??s(i,`align`,m)??s(t,`align`,m)??`center`,v=!1,y=!1,b=null,x=null,S=[],C=l(i,`tooltip-content`);i.setAttribute(`role`,`tooltip`),i.setAttribute(`data-side`,g),i.setAttribute(`data-align`,_);let w=()=>r.hasAttribute(`disabled`)||r.getAttribute(`aria-disabled`)===`true`,T=()=>{x||=u(document,`keydown`,e=>{e.key===`Escape`&&v&&k(`escape`)})},E=()=>{x?.(),x=null},D=(e,n)=>{if(v===e)return;v=e;let a=v?`open`:`closed`;t.setAttribute(`data-state`,a),i.setAttribute(`data-state`,a),v?(r.setAttribute(`aria-describedby`,C),i.setAttribute(`aria-hidden`,`false`),T()):(r.removeAttribute(`aria-describedby`),i.setAttribute(`aria-hidden`,`true`),E()),d(t,`tooltip:change`,{open:v,trigger:r,content:i,reason:n}),h?.(v)},O=e=>{if(b&&(clearTimeout(b),b=null),Date.now()<f){D(!0,e);return}b=setTimeout(()=>{D(!0,e),b=null},a)},k=e=>{b&&(clearTimeout(b),b=null),v&&c>0&&(f=Date.now()+c),D(!1,e)};i.setAttribute(`aria-hidden`,`true`),t.setAttribute(`data-state`,`closed`),i.setAttribute(`data-state`,`closed`),S.push(u(r,`pointerenter`,e=>{e.pointerType!==`touch`&&(w()||O(`pointer`))}),u(r,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&i.contains(t)||k(`pointer`)}),u(r,`focus`,()=>{y=!0,!w()&&O(`focus`)}),u(r,`blur`,()=>{y=!1,k(`blur`)})),S.push(u(i,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&r.contains(t)||k(`pointer`)}));let A={show:()=>{w()||(b&&(clearTimeout(b),b=null),D(!0,`api`))},hide:()=>k(`api`),get isOpen(){return v},destroy:()=>{b&&clearTimeout(b),E(),S.forEach(e=>e()),S.length=0}};return A}const g=new WeakSet;function _(e=document){let n=[];for(let r of t(e,`tooltip`)){if(g.has(r))continue;g.add(r),n.push(h(r))}return n}export{_ as create,h as createTooltip};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/tooltip",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",