@data-slot/tooltip 0.2.91 → 0.2.93
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -3
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -74,12 +74,19 @@ const tooltip = createTooltip(element, {
|
|
|
74
74
|
|
|
75
75
|
Options can also be set via data attributes. JS options take precedence.
|
|
76
76
|
|
|
77
|
+
Placement attributes (`data-side`, `data-align`, `data-side-offset`, `data-align-offset`, `data-avoid-collisions`, `data-collision-padding`) resolve in this order:
|
|
78
|
+
|
|
79
|
+
1. JavaScript option
|
|
80
|
+
2. `tooltip-content`
|
|
81
|
+
3. `tooltip-positioner`
|
|
82
|
+
4. `tooltip` root (fallback)
|
|
83
|
+
|
|
77
84
|
| Attribute | Type | Default | Description |
|
|
78
85
|
|-----------|------|---------|-------------|
|
|
79
86
|
| `data-delay` | number | `300` | Delay before showing tooltip (ms) |
|
|
80
87
|
| `data-skip-delay-duration` | number | `300` | Duration to skip delay after closing (ms) |
|
|
81
|
-
| `data-side` | string | `"top"` | Side relative to trigger
|
|
82
|
-
| `data-align` | string | `"center"` | Alignment along the side
|
|
88
|
+
| `data-side` | string | `"top"` | Side relative to trigger |
|
|
89
|
+
| `data-align` | string | `"center"` | Alignment along the side |
|
|
83
90
|
| `data-side-offset` | number | `4` | Distance from trigger (px) |
|
|
84
91
|
| `data-align-offset` | number | `0` | Alignment edge offset (px) |
|
|
85
92
|
| `data-avoid-collisions` | boolean | `true` | Collision handling |
|
|
@@ -172,6 +179,7 @@ The component sets these attributes automatically:
|
|
|
172
179
|
|
|
173
180
|
Position is computed in JavaScript and applied to the positioner as `position: absolute` + `transform: translate3d(...)`.
|
|
174
181
|
By default, content is portaled to `document.body` while open.
|
|
182
|
+
The positioned element (`tooltip-positioner`, or `tooltip-content` when `portal` is disabled) gets `--transform-origin`, which `tooltip-content` can use for transform animations via CSS inheritance.
|
|
175
183
|
Use `data-open` / `data-closed`, `data-side`, and `data-align` for styling and animations.
|
|
176
184
|
Placement uses layout dimensions, so `scale`/`zoom` animations on `tooltip-content` remain stable without adding an extra wrapper.
|
|
177
185
|
|
|
@@ -185,7 +193,7 @@ The visibility transition trick keeps the tooltip visible during fade-out, then
|
|
|
185
193
|
opacity: 0;
|
|
186
194
|
visibility: hidden;
|
|
187
195
|
pointer-events: none;
|
|
188
|
-
transform-origin: center;
|
|
196
|
+
transform-origin: var(--transform-origin, center);
|
|
189
197
|
transition: opacity 0.15s ease, visibility 0s linear 0.15s;
|
|
190
198
|
}
|
|
191
199
|
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`),t=0;const n=[`top`,`right`,`bottom`,`left`],r=[`start`,`center`,`end`];function i(i,a={}){let o=(0,e.getPart)(i,`tooltip-trigger`),s=(0,e.getPart)(i,`tooltip-content`),c=(0,e.getPart)(i,`tooltip-positioner`),l=c&&s&&c.contains(s)?c:null,u=(0,e.getPart)(i,`tooltip-portal`),d=u&&l&&u.contains(l)?u:null;if(!o||!s)throw Error(`Tooltip requires trigger and content slots`);let f=a.delay??(0,e.getDataNumber)(i,`delay`)??300,p=a.skipDelayDuration??(0,e.getDataNumber)(i,`skipDelayDuration`)??300,m=a.onOpenChange,h=a.portal??(0,e.getDataBool)(s,`portal`)??(0,e.getDataBool)(i,`portal`)??!0,g=
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`),t=0;const n=[`top`,`right`,`bottom`,`left`],r=[`start`,`center`,`end`];function i(i,a={}){let o=(0,e.getPart)(i,`tooltip-trigger`),s=(0,e.getPart)(i,`tooltip-content`),c=(0,e.getPart)(i,`tooltip-positioner`),l=c&&s&&c.contains(s)?c:null,u=(0,e.getPart)(i,`tooltip-portal`),d=u&&l&&u.contains(l)?u:null;if(!o||!s)throw Error(`Tooltip requires trigger and content slots`);let f=a.delay??(0,e.getDataNumber)(i,`delay`)??300,p=a.skipDelayDuration??(0,e.getDataNumber)(i,`skipDelayDuration`)??300,m=a.onOpenChange,h=a.portal??(0,e.getDataBool)(s,`portal`)??(0,e.getDataBool)(i,`portal`)??!0,g=(t,n)=>(0,e.getDataEnum)(s,t,n)??(l?(0,e.getDataEnum)(l,t,n):void 0)??(0,e.getDataEnum)(i,t,n),_=t=>(0,e.getDataNumber)(s,t)??(l?(0,e.getDataNumber)(l,t):void 0)??(0,e.getDataNumber)(i,t),v=t=>(0,e.getDataBool)(s,t)??(l?(0,e.getDataBool)(l,t):void 0)??(0,e.getDataBool)(i,t),y=a.side??g(`side`,n)??`top`,b=a.align??g(`align`,r)??`center`,x=a.sideOffset??_(`sideOffset`)??4,S=a.alignOffset??_(`alignOffset`)??0,C=a.avoidCollisions??v(`avoidCollisions`)??!0,w=a.collisionPadding??_(`collisionPadding`)??8,T=!1,E=!1,D=!1,O=!1,k=null,A=[],j=(0,e.createPortalLifecycle)({content:s,root:i,enabled:h,wrapperSlot:l?void 0:`tooltip-positioner`,container:l??void 0,mountTarget:l?d??l:void 0}),M=(0,e.ensureId)(s,`tooltip-content`);s.setAttribute(`role`,`tooltip`),s.setAttribute(`data-side`,y),s.setAttribute(`data-align`,b);let N=e=>{let t=j.container;if(i.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),t!==s&&t.setAttribute(`data-state`,e),e===`open`){i.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),t!==s&&t.setAttribute(`data-open`,``),E?(i.setAttribute(`data-instant`,``),s.setAttribute(`data-instant`,``),t!==s&&t.setAttribute(`data-instant`,``)):(i.removeAttribute(`data-instant`),s.removeAttribute(`data-instant`),t!==s&&t.removeAttribute(`data-instant`)),i.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),t!==s&&t.removeAttribute(`data-closed`);return}i.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),t!==s&&t.setAttribute(`data-closed`,``),i.removeAttribute(`data-instant`),s.removeAttribute(`data-instant`),t!==s&&t.removeAttribute(`data-instant`),i.removeAttribute(`data-open`),s.removeAttribute(`data-open`),t!==s&&t.removeAttribute(`data-open`)},P=()=>{let t=j.container,n=i.ownerDocument.defaultView??window,r=o.getBoundingClientRect(),a=(0,e.computeFloatingPosition)({anchorRect:r,contentRect:(0,e.measurePopupContentRect)(s),side:y,align:b,sideOffset:x,alignOffset:S,avoidCollisions:C,collisionPadding:w}),c=(0,e.computeFloatingTransformOrigin)({side:a.side,align:a.align,anchorRect:r,popupX:a.x,popupY:a.y});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${a.x+n.scrollX}px, ${a.y+n.scrollY}px, 0)`,t.style.setProperty(`--transform-origin`,c),t.style.willChange=`transform`,t.style.margin=`0`,s.setAttribute(`data-side`,a.side),s.setAttribute(`data-align`,a.align),t!==s&&(t.setAttribute(`data-side`,a.side),t.setAttribute(`data-align`,a.align))},F=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{O||(j.restore(),s.hidden=!0)}}),I=(0,e.createPositionSync)({observedElements:[o,s],isActive:()=>T,ancestorScroll:!1,onUpdate:P}),L=()=>o.hasAttribute(`disabled`)||o.getAttribute(`aria-disabled`)===`true`,R=(n,r,a=!1)=>{T!==n&&(!n&&T&&p>0&&(t=Date.now()+p),E=n?a:!1,T=n,T?(o.setAttribute(`aria-describedby`,M),s.setAttribute(`aria-hidden`,`false`),j.mount(),s.hidden=!1,N(`open`),F.enter(),P(),I.start(),I.update()):(N(`closed`),o.removeAttribute(`aria-describedby`),s.setAttribute(`aria-hidden`,`true`),F.exit(),I.stop()),(0,e.emit)(i,`tooltip:change`,{open:T,trigger:o,content:s,reason:r}),m?.(T))},z=e=>{if(k&&=(clearTimeout(k),null),Date.now()<t){R(!0,e,!0);return}k=setTimeout(()=>{R(!0,e),k=null},f)},B=e=>{k&&=(clearTimeout(k),null),R(!1,e)};return s.hidden=!0,s.setAttribute(`aria-hidden`,`true`),N(`closed`),A.push((0,e.on)(o,`pointerenter`,e=>{e.pointerType!==`touch`&&(L()||z(`pointer`))}),(0,e.on)(o,`pointerleave`,e=>{if(e.pointerType===`touch`||D)return;let t=e.relatedTarget;t&&s.contains(t)||B(`pointer`)}),(0,e.on)(o,`focus`,()=>{D=!0,!L()&&z(`focus`)}),(0,e.on)(o,`blur`,()=>{D=!1,B(`blur`)})),A.push((0,e.on)(s,`pointerleave`,e=>{if(e.pointerType===`touch`||D)return;let t=e.relatedTarget;t&&o.contains(t)||B(`pointer`)})),A.push((0,e.on)(i,`tooltip:set`,e=>{let t=e.detail,n;if(t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`)if(n){if(L())return;k&&=(clearTimeout(k),null),R(!0,`api`)}else B(`api`)})),A.push((0,e.createDismissLayer)({root:i,isOpen:()=>T,onDismiss:()=>B(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{L()||(k&&=(clearTimeout(k),null),R(!0,`api`))},hide:()=>B(`api`),get isOpen(){return T},destroy:()=>{O=!0,k&&clearTimeout(k),I.stop(),F.cleanup(),j.cleanup(),A.forEach(e=>e()),A.length=0}}}const a=new WeakSet;function o(t=document){let n=[];for(let r of(0,e.getRoots)(t,`tooltip`))a.has(r)||(a.add(r),n.push(i(r)));return n}exports.create=o,exports.createTooltip=i;
|
package/dist/index.d.cts
CHANGED
|
@@ -47,7 +47,7 @@ interface TooltipController {
|
|
|
47
47
|
* </div>
|
|
48
48
|
* ```
|
|
49
49
|
*
|
|
50
|
-
*
|
|
50
|
+
* Placement data attributes are resolved as: content -> authored positioner -> root.
|
|
51
51
|
* - `data-side`: 'top' | 'right' | 'bottom' | 'left' (bind-time preferred side)
|
|
52
52
|
* - `data-align`: 'start' | 'center' | 'end' (bind-time preferred align)
|
|
53
53
|
* - `data-side-offset`: number (px)
|
package/dist/index.d.ts
CHANGED
|
@@ -47,7 +47,7 @@ interface TooltipController {
|
|
|
47
47
|
* </div>
|
|
48
48
|
* ```
|
|
49
49
|
*
|
|
50
|
-
*
|
|
50
|
+
* Placement data attributes are resolved as: content -> authored positioner -> root.
|
|
51
51
|
* - `data-side`: 'top' | 'right' | 'bottom' | 'left' (bind-time preferred side)
|
|
52
52
|
* - `data-align`: 'start' | 'center' | 'end' (bind-time preferred align)
|
|
53
53
|
* - `data-side-offset`: number (px)
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{computeFloatingPosition as e,
|
|
1
|
+
import{computeFloatingPosition as e,computeFloatingTransformOrigin as t,createDismissLayer as n,createPortalLifecycle as r,createPositionSync as i,createPresenceLifecycle as a,emit as o,ensureId as s,getDataBool as c,getDataEnum as l,getDataNumber as u,getPart as d,getRoots as f,measurePopupContentRect as p,on as m}from"@data-slot/core";let h=0;const g=[`top`,`right`,`bottom`,`left`],_=[`start`,`center`,`end`];function v(f,v={}){let y=d(f,`tooltip-trigger`),b=d(f,`tooltip-content`),x=d(f,`tooltip-positioner`),S=x&&b&&x.contains(b)?x:null,C=d(f,`tooltip-portal`),w=C&&S&&C.contains(S)?C:null;if(!y||!b)throw Error(`Tooltip requires trigger and content slots`);let T=v.delay??u(f,`delay`)??300,E=v.skipDelayDuration??u(f,`skipDelayDuration`)??300,D=v.onOpenChange,O=v.portal??c(b,`portal`)??c(f,`portal`)??!0,k=(e,t)=>l(b,e,t)??(S?l(S,e,t):void 0)??l(f,e,t),A=e=>u(b,e)??(S?u(S,e):void 0)??u(f,e),j=e=>c(b,e)??(S?c(S,e):void 0)??c(f,e),M=v.side??k(`side`,g)??`top`,N=v.align??k(`align`,_)??`center`,P=v.sideOffset??A(`sideOffset`)??4,F=v.alignOffset??A(`alignOffset`)??0,I=v.avoidCollisions??j(`avoidCollisions`)??!0,L=v.collisionPadding??A(`collisionPadding`)??8,R=!1,z=!1,B=!1,V=!1,H=null,U=[],W=r({content:b,root:f,enabled:O,wrapperSlot:S?void 0:`tooltip-positioner`,container:S??void 0,mountTarget:S?w??S:void 0}),G=s(b,`tooltip-content`);b.setAttribute(`role`,`tooltip`),b.setAttribute(`data-side`,M),b.setAttribute(`data-align`,N);let K=e=>{let t=W.container;if(f.setAttribute(`data-state`,e),b.setAttribute(`data-state`,e),t!==b&&t.setAttribute(`data-state`,e),e===`open`){f.setAttribute(`data-open`,``),b.setAttribute(`data-open`,``),t!==b&&t.setAttribute(`data-open`,``),z?(f.setAttribute(`data-instant`,``),b.setAttribute(`data-instant`,``),t!==b&&t.setAttribute(`data-instant`,``)):(f.removeAttribute(`data-instant`),b.removeAttribute(`data-instant`),t!==b&&t.removeAttribute(`data-instant`)),f.removeAttribute(`data-closed`),b.removeAttribute(`data-closed`),t!==b&&t.removeAttribute(`data-closed`);return}f.setAttribute(`data-closed`,``),b.setAttribute(`data-closed`,``),t!==b&&t.setAttribute(`data-closed`,``),f.removeAttribute(`data-instant`),b.removeAttribute(`data-instant`),t!==b&&t.removeAttribute(`data-instant`),f.removeAttribute(`data-open`),b.removeAttribute(`data-open`),t!==b&&t.removeAttribute(`data-open`)},q=()=>{let n=W.container,r=f.ownerDocument.defaultView??window,i=y.getBoundingClientRect(),a=e({anchorRect:i,contentRect:p(b),side:M,align:N,sideOffset:P,alignOffset:F,avoidCollisions:I,collisionPadding:L}),o=t({side:a.side,align:a.align,anchorRect:i,popupX:a.x,popupY:a.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${a.x+r.scrollX}px, ${a.y+r.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,o),n.style.willChange=`transform`,n.style.margin=`0`,b.setAttribute(`data-side`,a.side),b.setAttribute(`data-align`,a.align),n!==b&&(n.setAttribute(`data-side`,a.side),n.setAttribute(`data-align`,a.align))},J=a({element:b,onExitComplete:()=>{V||(W.restore(),b.hidden=!0)}}),Y=i({observedElements:[y,b],isActive:()=>R,ancestorScroll:!1,onUpdate:q}),X=()=>y.hasAttribute(`disabled`)||y.getAttribute(`aria-disabled`)===`true`,Z=(e,t,n=!1)=>{R!==e&&(!e&&R&&E>0&&(h=Date.now()+E),z=e?n:!1,R=e,R?(y.setAttribute(`aria-describedby`,G),b.setAttribute(`aria-hidden`,`false`),W.mount(),b.hidden=!1,K(`open`),J.enter(),q(),Y.start(),Y.update()):(K(`closed`),y.removeAttribute(`aria-describedby`),b.setAttribute(`aria-hidden`,`true`),J.exit(),Y.stop()),o(f,`tooltip:change`,{open:R,trigger:y,content:b,reason:t}),D?.(R))},Q=e=>{if(H&&=(clearTimeout(H),null),Date.now()<h){Z(!0,e,!0);return}H=setTimeout(()=>{Z(!0,e),H=null},T)},$=e=>{H&&=(clearTimeout(H),null),Z(!1,e)};return b.hidden=!0,b.setAttribute(`aria-hidden`,`true`),K(`closed`),U.push(m(y,`pointerenter`,e=>{e.pointerType!==`touch`&&(X()||Q(`pointer`))}),m(y,`pointerleave`,e=>{if(e.pointerType===`touch`||B)return;let t=e.relatedTarget;t&&b.contains(t)||$(`pointer`)}),m(y,`focus`,()=>{B=!0,!X()&&Q(`focus`)}),m(y,`blur`,()=>{B=!1,$(`blur`)})),U.push(m(b,`pointerleave`,e=>{if(e.pointerType===`touch`||B)return;let t=e.relatedTarget;t&&y.contains(t)||$(`pointer`)})),U.push(m(f,`tooltip:set`,e=>{let t=e.detail,n;if(t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`)if(n){if(X())return;H&&=(clearTimeout(H),null),Z(!0,`api`)}else $(`api`)})),U.push(n({root:f,isOpen:()=>R,onDismiss:()=>$(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{X()||(H&&=(clearTimeout(H),null),Z(!0,`api`))},hide:()=>$(`api`),get isOpen(){return R},destroy:()=>{V=!0,H&&clearTimeout(H),Y.stop(),J.cleanup(),W.cleanup(),U.forEach(e=>e()),U.length=0}}}const y=new WeakSet;function b(e=document){let t=[];for(let n of f(e,`tooltip`))y.has(n)||(y.add(n),t.push(v(n)));return t}export{b as create,v as createTooltip};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-slot/tooltip",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.93",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -38,6 +38,6 @@
|
|
|
38
38
|
],
|
|
39
39
|
"license": "MIT",
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@data-slot/core": "0.2.
|
|
41
|
+
"@data-slot/core": "0.2.93"
|
|
42
42
|
}
|
|
43
43
|
}
|