@data-slot/tooltip 0.2.89 → 0.2.91
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 +9 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -158,8 +158,10 @@ The component sets these attributes automatically:
|
|
|
158
158
|
|---------|-----------|--------|
|
|
159
159
|
| Root | `data-state` | `"open"` \| `"closed"` |
|
|
160
160
|
| Root | `data-open` / `data-closed` | Present when matching state |
|
|
161
|
+
| Root | `data-instant` | Present for warm-up opens (delay skipped) |
|
|
161
162
|
| Content | `data-state` | `"open"` \| `"closed"` |
|
|
162
163
|
| Content | `data-open` / `data-closed` | Present when matching state |
|
|
164
|
+
| Content | `data-instant` | Present for warm-up opens (delay skipped) |
|
|
163
165
|
| Content | `data-side` | `"top"` \| `"right"` \| `"bottom"` \| `"left"` |
|
|
164
166
|
| Content | `data-align` | `"start"` \| `"center"` \| `"end"` |
|
|
165
167
|
| Content | `role` | `"tooltip"` |
|
|
@@ -171,6 +173,7 @@ The component sets these attributes automatically:
|
|
|
171
173
|
Position is computed in JavaScript and applied to the positioner as `position: absolute` + `transform: translate3d(...)`.
|
|
172
174
|
By default, content is portaled to `document.body` while open.
|
|
173
175
|
Use `data-open` / `data-closed`, `data-side`, and `data-align` for styling and animations.
|
|
176
|
+
Placement uses layout dimensions, so `scale`/`zoom` animations on `tooltip-content` remain stable without adding an extra wrapper.
|
|
174
177
|
|
|
175
178
|
### Recommended CSS
|
|
176
179
|
|
|
@@ -196,6 +199,11 @@ The visibility transition trick keeps the tooltip visible during fade-out, then
|
|
|
196
199
|
[data-slot="tooltip-content"][data-closed] {
|
|
197
200
|
pointer-events: none;
|
|
198
201
|
}
|
|
202
|
+
|
|
203
|
+
[data-slot="tooltip-content"][data-instant] {
|
|
204
|
+
transition: none;
|
|
205
|
+
animation: none;
|
|
206
|
+
}
|
|
199
207
|
```
|
|
200
208
|
|
|
201
209
|
### Tailwind Example
|
|
@@ -227,7 +235,7 @@ When a user closes one tooltip and quickly hovers another, the second tooltip sh
|
|
|
227
235
|
|
|
228
236
|
- Controlled by `skipDelayDuration` option
|
|
229
237
|
- Set to `0` to disable this behavior
|
|
230
|
-
- Warm-up
|
|
238
|
+
- Warm-up adds `data-instant` on the open cycle so CSS can disable transitions
|
|
231
239
|
- Warm window is set only when a tooltip actually closes (not when a pending open is cancelled)
|
|
232
240
|
|
|
233
241
|
## Accessibility
|
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=a.side??(0,e.getDataEnum)(s,`side`,n)??(0,e.getDataEnum)(i,`side`,n)??`top`,_=a.align??(0,e.getDataEnum)(s,`align`,r)??(0,e.getDataEnum)(i,`align`,r)??`center`,v=a.sideOffset??(0,e.getDataNumber)(s,`sideOffset`)??(0,e.getDataNumber)(i,`sideOffset`)??4,y=a.alignOffset??(0,e.getDataNumber)(s,`alignOffset`)??(0,e.getDataNumber)(i,`alignOffset`)??0,b=a.avoidCollisions??(0,e.getDataBool)(s,`avoidCollisions`)??(0,e.getDataBool)(i,`avoidCollisions`)??!0,x=a.collisionPadding??(0,e.getDataNumber)(s,`collisionPadding`)??(0,e.getDataNumber)(i,`collisionPadding`)??8,S=!1,C=!1,w=!1,T=null,
|
|
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=a.side??(0,e.getDataEnum)(s,`side`,n)??(0,e.getDataEnum)(i,`side`,n)??`top`,_=a.align??(0,e.getDataEnum)(s,`align`,r)??(0,e.getDataEnum)(i,`align`,r)??`center`,v=a.sideOffset??(0,e.getDataNumber)(s,`sideOffset`)??(0,e.getDataNumber)(i,`sideOffset`)??4,y=a.alignOffset??(0,e.getDataNumber)(s,`alignOffset`)??(0,e.getDataNumber)(i,`alignOffset`)??0,b=a.avoidCollisions??(0,e.getDataBool)(s,`avoidCollisions`)??(0,e.getDataBool)(i,`avoidCollisions`)??!0,x=a.collisionPadding??(0,e.getDataNumber)(s,`collisionPadding`)??(0,e.getDataNumber)(i,`collisionPadding`)??8,S=!1,C=!1,w=!1,T=!1,E=null,D=[],O=(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}),k=(0,e.ensureId)(s,`tooltip-content`);s.setAttribute(`role`,`tooltip`),s.setAttribute(`data-side`,g),s.setAttribute(`data-align`,_);let A=e=>{let t=O.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`,``),C?(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`)},j=()=>{let t=O.container,n=i.ownerDocument.defaultView??window,r=(0,e.computeFloatingPosition)({anchorRect:o.getBoundingClientRect(),contentRect:(0,e.measurePopupContentRect)(s),side:g,align:_,sideOffset:v,alignOffset:y,avoidCollisions:b,collisionPadding:x});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))},M=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{T||(O.restore(),s.hidden=!0)}}),N=(0,e.createPositionSync)({observedElements:[o,s],isActive:()=>S,ancestorScroll:!1,onUpdate:j}),P=()=>o.hasAttribute(`disabled`)||o.getAttribute(`aria-disabled`)===`true`,F=(n,r,a=!1)=>{S!==n&&(!n&&S&&p>0&&(t=Date.now()+p),C=n?a:!1,S=n,S?(o.setAttribute(`aria-describedby`,k),s.setAttribute(`aria-hidden`,`false`),O.mount(),s.hidden=!1,A(`open`),M.enter(),j(),N.start(),N.update()):(A(`closed`),o.removeAttribute(`aria-describedby`),s.setAttribute(`aria-hidden`,`true`),M.exit(),N.stop()),(0,e.emit)(i,`tooltip:change`,{open:S,trigger:o,content:s,reason:r}),m?.(S))},I=e=>{if(E&&=(clearTimeout(E),null),Date.now()<t){F(!0,e,!0);return}E=setTimeout(()=>{F(!0,e),E=null},f)},L=e=>{E&&=(clearTimeout(E),null),F(!1,e)};return s.hidden=!0,s.setAttribute(`aria-hidden`,`true`),A(`closed`),D.push((0,e.on)(o,`pointerenter`,e=>{e.pointerType!==`touch`&&(P()||I(`pointer`))}),(0,e.on)(o,`pointerleave`,e=>{if(e.pointerType===`touch`||w)return;let t=e.relatedTarget;t&&s.contains(t)||L(`pointer`)}),(0,e.on)(o,`focus`,()=>{w=!0,!P()&&I(`focus`)}),(0,e.on)(o,`blur`,()=>{w=!1,L(`blur`)})),D.push((0,e.on)(s,`pointerleave`,e=>{if(e.pointerType===`touch`||w)return;let t=e.relatedTarget;t&&o.contains(t)||L(`pointer`)})),D.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(P())return;E&&=(clearTimeout(E),null),F(!0,`api`)}else L(`api`)})),D.push((0,e.createDismissLayer)({root:i,isOpen:()=>S,onDismiss:()=>L(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{P()||(E&&=(clearTimeout(E),null),F(!0,`api`))},hide:()=>L(`api`),get isOpen(){return S},destroy:()=>{T=!0,E&&clearTimeout(E),N.stop(),M.cleanup(),O.cleanup(),D.forEach(e=>e()),D.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.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=_.side??c(y,`side`,h)??c(d,`side`,h)??`top`,k=_.align??c(y,`align`,g)??c(d,`align`,g)??`center`,A=_.sideOffset??l(y,`sideOffset`)??l(d,`sideOffset`)??4,j=_.alignOffset??l(y,`alignOffset`)??l(d,`alignOffset`)??0,M=_.avoidCollisions??s(y,`avoidCollisions`)??s(d,`avoidCollisions`)??!0,N=_.collisionPadding??l(y,`collisionPadding`)??l(d,`collisionPadding`)??8,P=!1,F=!1,I=!1,L=!1,R=null,z=[],B=n({content:y,root:d,enabled:D,wrapperSlot:x?void 0:`tooltip-positioner`,container:x??void 0,mountTarget:x?C??x:void 0}),V=o(y,`tooltip-content`);y.setAttribute(`role`,`tooltip`),y.setAttribute(`data-side`,O),y.setAttribute(`data-align`,k);let H=e=>{let t=B.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`,``),F?(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`)},U=()=>{let t=B.container,n=d.ownerDocument.defaultView??window,r=e({anchorRect:v.getBoundingClientRect(),contentRect:f(y),side:O,align:k,sideOffset:A,alignOffset:j,avoidCollisions:M,collisionPadding:N});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))},W=i({element:y,onExitComplete:()=>{L||(B.restore(),y.hidden=!0)}}),G=r({observedElements:[v,y],isActive:()=>P,ancestorScroll:!1,onUpdate:U}),K=()=>v.hasAttribute(`disabled`)||v.getAttribute(`aria-disabled`)===`true`,q=(e,t,n=!1)=>{P!==e&&(!e&&P&&T>0&&(m=Date.now()+T),F=e?n:!1,P=e,P?(v.setAttribute(`aria-describedby`,V),y.setAttribute(`aria-hidden`,`false`),B.mount(),y.hidden=!1,H(`open`),W.enter(),U(),G.start(),G.update()):(H(`closed`),v.removeAttribute(`aria-describedby`),y.setAttribute(`aria-hidden`,`true`),W.exit(),G.stop()),a(d,`tooltip:change`,{open:P,trigger:v,content:y,reason:t}),E?.(P))},J=e=>{if(R&&=(clearTimeout(R),null),Date.now()<m){q(!0,e,!0);return}R=setTimeout(()=>{q(!0,e),R=null},w)},Y=e=>{R&&=(clearTimeout(R),null),q(!1,e)};return y.hidden=!0,y.setAttribute(`aria-hidden`,`true`),H(`closed`),z.push(p(v,`pointerenter`,e=>{e.pointerType!==`touch`&&(K()||J(`pointer`))}),p(v,`pointerleave`,e=>{if(e.pointerType===`touch`||I)return;let t=e.relatedTarget;t&&y.contains(t)||Y(`pointer`)}),p(v,`focus`,()=>{I=!0,!K()&&J(`focus`)}),p(v,`blur`,()=>{I=!1,Y(`blur`)})),z.push(p(y,`pointerleave`,e=>{if(e.pointerType===`touch`||I)return;let t=e.relatedTarget;t&&v.contains(t)||Y(`pointer`)})),z.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(K())return;R&&=(clearTimeout(R),null),q(!0,`api`)}else Y(`api`)})),z.push(t({root:d,isOpen:()=>P,onDismiss:()=>Y(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{K()||(R&&=(clearTimeout(R),null),q(!0,`api`))},hide:()=>Y(`api`),get isOpen(){return P},destroy:()=>{L=!0,R&&clearTimeout(R),G.stop(),W.cleanup(),B.cleanup(),z.forEach(e=>e()),z.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.91",
|
|
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.91"
|
|
42
42
|
}
|
|
43
43
|
}
|