@data-slot/tooltip 0.2.90 → 0.2.92
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 +10 -2
- 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 |
|
|
@@ -173,6 +180,7 @@ The component sets these attributes automatically:
|
|
|
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.
|
|
175
182
|
Use `data-open` / `data-closed`, `data-side`, and `data-align` for styling and animations.
|
|
183
|
+
Placement uses layout dimensions, so `scale`/`zoom` animations on `tooltip-content` remain stable without adding an extra wrapper.
|
|
176
184
|
|
|
177
185
|
### Recommended CSS
|
|
178
186
|
|
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=(0,e.computeFloatingPosition)({anchorRect:o.getBoundingClientRect(),contentRect:(0,e.measurePopupContentRect)(s),side:y,align:b,sideOffset:x,alignOffset:S,avoidCollisions:C,collisionPadding:w});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${r.x+n.scrollX}px, ${r.y+n.scrollY}px, 0)`,t.style.willChange=`transform`,t.style.margin=`0`,s.setAttribute(`data-side`,r.side),s.setAttribute(`data-align`,r.align),t!==s&&(t.setAttribute(`data-side`,r.side),t.setAttribute(`data-align`,r.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,createDismissLayer as t,createPortalLifecycle as n,createPositionSync as r,createPresenceLifecycle as i,emit as a,ensureId as o,getDataBool as s,getDataEnum as c,getDataNumber as l,getPart as u,getRoots as d,on as
|
|
1
|
+
import{computeFloatingPosition as e,createDismissLayer as t,createPortalLifecycle as n,createPositionSync as r,createPresenceLifecycle as i,emit as a,ensureId as o,getDataBool as s,getDataEnum as c,getDataNumber as l,getPart as u,getRoots as d,measurePopupContentRect as f,on as p}from"@data-slot/core";let m=0;const h=[`top`,`right`,`bottom`,`left`],g=[`start`,`center`,`end`];function _(d,_={}){let v=u(d,`tooltip-trigger`),y=u(d,`tooltip-content`),b=u(d,`tooltip-positioner`),x=b&&y&&b.contains(y)?b:null,S=u(d,`tooltip-portal`),C=S&&x&&S.contains(x)?S:null;if(!v||!y)throw Error(`Tooltip requires trigger and content slots`);let w=_.delay??l(d,`delay`)??300,T=_.skipDelayDuration??l(d,`skipDelayDuration`)??300,E=_.onOpenChange,D=_.portal??s(y,`portal`)??s(d,`portal`)??!0,O=(e,t)=>c(y,e,t)??(x?c(x,e,t):void 0)??c(d,e,t),k=e=>l(y,e)??(x?l(x,e):void 0)??l(d,e),A=e=>s(y,e)??(x?s(x,e):void 0)??s(d,e),j=_.side??O(`side`,h)??`top`,M=_.align??O(`align`,g)??`center`,N=_.sideOffset??k(`sideOffset`)??4,P=_.alignOffset??k(`alignOffset`)??0,F=_.avoidCollisions??A(`avoidCollisions`)??!0,I=_.collisionPadding??k(`collisionPadding`)??8,L=!1,R=!1,z=!1,B=!1,V=null,H=[],U=n({content:y,root:d,enabled:D,wrapperSlot:x?void 0:`tooltip-positioner`,container:x??void 0,mountTarget:x?C??x:void 0}),W=o(y,`tooltip-content`);y.setAttribute(`role`,`tooltip`),y.setAttribute(`data-side`,j),y.setAttribute(`data-align`,M);let G=e=>{let t=U.container;if(d.setAttribute(`data-state`,e),y.setAttribute(`data-state`,e),t!==y&&t.setAttribute(`data-state`,e),e===`open`){d.setAttribute(`data-open`,``),y.setAttribute(`data-open`,``),t!==y&&t.setAttribute(`data-open`,``),R?(d.setAttribute(`data-instant`,``),y.setAttribute(`data-instant`,``),t!==y&&t.setAttribute(`data-instant`,``)):(d.removeAttribute(`data-instant`),y.removeAttribute(`data-instant`),t!==y&&t.removeAttribute(`data-instant`)),d.removeAttribute(`data-closed`),y.removeAttribute(`data-closed`),t!==y&&t.removeAttribute(`data-closed`);return}d.setAttribute(`data-closed`,``),y.setAttribute(`data-closed`,``),t!==y&&t.setAttribute(`data-closed`,``),d.removeAttribute(`data-instant`),y.removeAttribute(`data-instant`),t!==y&&t.removeAttribute(`data-instant`),d.removeAttribute(`data-open`),y.removeAttribute(`data-open`),t!==y&&t.removeAttribute(`data-open`)},K=()=>{let t=U.container,n=d.ownerDocument.defaultView??window,r=e({anchorRect:v.getBoundingClientRect(),contentRect:f(y),side:j,align:M,sideOffset:N,alignOffset:P,avoidCollisions:F,collisionPadding:I});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${r.x+n.scrollX}px, ${r.y+n.scrollY}px, 0)`,t.style.willChange=`transform`,t.style.margin=`0`,y.setAttribute(`data-side`,r.side),y.setAttribute(`data-align`,r.align),t!==y&&(t.setAttribute(`data-side`,r.side),t.setAttribute(`data-align`,r.align))},q=i({element:y,onExitComplete:()=>{B||(U.restore(),y.hidden=!0)}}),J=r({observedElements:[v,y],isActive:()=>L,ancestorScroll:!1,onUpdate:K}),Y=()=>v.hasAttribute(`disabled`)||v.getAttribute(`aria-disabled`)===`true`,X=(e,t,n=!1)=>{L!==e&&(!e&&L&&T>0&&(m=Date.now()+T),R=e?n:!1,L=e,L?(v.setAttribute(`aria-describedby`,W),y.setAttribute(`aria-hidden`,`false`),U.mount(),y.hidden=!1,G(`open`),q.enter(),K(),J.start(),J.update()):(G(`closed`),v.removeAttribute(`aria-describedby`),y.setAttribute(`aria-hidden`,`true`),q.exit(),J.stop()),a(d,`tooltip:change`,{open:L,trigger:v,content:y,reason:t}),E?.(L))},Z=e=>{if(V&&=(clearTimeout(V),null),Date.now()<m){X(!0,e,!0);return}V=setTimeout(()=>{X(!0,e),V=null},w)},Q=e=>{V&&=(clearTimeout(V),null),X(!1,e)};return y.hidden=!0,y.setAttribute(`aria-hidden`,`true`),G(`closed`),H.push(p(v,`pointerenter`,e=>{e.pointerType!==`touch`&&(Y()||Z(`pointer`))}),p(v,`pointerleave`,e=>{if(e.pointerType===`touch`||z)return;let t=e.relatedTarget;t&&y.contains(t)||Q(`pointer`)}),p(v,`focus`,()=>{z=!0,!Y()&&Z(`focus`)}),p(v,`blur`,()=>{z=!1,Q(`blur`)})),H.push(p(y,`pointerleave`,e=>{if(e.pointerType===`touch`||z)return;let t=e.relatedTarget;t&&v.contains(t)||Q(`pointer`)})),H.push(p(d,`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(Y())return;V&&=(clearTimeout(V),null),X(!0,`api`)}else Q(`api`)})),H.push(t({root:d,isOpen:()=>L,onDismiss:()=>Q(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{Y()||(V&&=(clearTimeout(V),null),X(!0,`api`))},hide:()=>Q(`api`),get isOpen(){return L},destroy:()=>{B=!0,V&&clearTimeout(V),J.stop(),q.cleanup(),U.cleanup(),H.forEach(e=>e()),H.length=0}}}const v=new WeakSet;function y(e=document){let t=[];for(let n of d(e,`tooltip`))v.has(n)||(v.add(n),t.push(_(n)));return t}export{y as create,_ 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.92",
|
|
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.92"
|
|
42
42
|
}
|
|
43
43
|
}
|