@data-slot/tooltip 0.2.89 → 0.2.90
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 +8 -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"` |
|
|
@@ -196,6 +198,11 @@ The visibility transition trick keeps the tooltip visible during fade-out, then
|
|
|
196
198
|
[data-slot="tooltip-content"][data-closed] {
|
|
197
199
|
pointer-events: none;
|
|
198
200
|
}
|
|
201
|
+
|
|
202
|
+
[data-slot="tooltip-content"][data-instant] {
|
|
203
|
+
transition: none;
|
|
204
|
+
animation: none;
|
|
205
|
+
}
|
|
199
206
|
```
|
|
200
207
|
|
|
201
208
|
### Tailwind Example
|
|
@@ -227,7 +234,7 @@ When a user closes one tooltip and quickly hovers another, the second tooltip sh
|
|
|
227
234
|
|
|
228
235
|
- Controlled by `skipDelayDuration` option
|
|
229
236
|
- Set to `0` to disable this behavior
|
|
230
|
-
- Warm-up
|
|
237
|
+
- Warm-up adds `data-instant` on the open cycle so CSS can disable transitions
|
|
231
238
|
- Warm window is set only when a tooltip actually closes (not when a pending open is cancelled)
|
|
232
239
|
|
|
233
240
|
## 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:s.getBoundingClientRect(),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 f}from"@data-slot/core";let p=0;const m=[`top`,`right`,`bottom`,`left`],h=[`start`,`center`,`end`];function g(d,g={}){let _=u(d,`tooltip-trigger`),v=u(d,`tooltip-content`),y=u(d,`tooltip-positioner`),b=y&&v&&y.contains(v)?y:null,x=u(d,`tooltip-portal`),S=x&&b&&x.contains(b)?x:null;if(!_||!v)throw Error(`Tooltip requires trigger and content slots`);let C=g.delay??l(d,`delay`)??300,w=g.skipDelayDuration??l(d,`skipDelayDuration`)??300,T=g.onOpenChange,E=g.portal??s(v,`portal`)??s(d,`portal`)??!0,D=g.side??c(v,`side`,m)??c(d,`side`,m)??`top`,O=g.align??c(v,`align`,h)??c(d,`align`,h)??`center`,k=g.sideOffset??l(v,`sideOffset`)??l(d,`sideOffset`)??4,A=g.alignOffset??l(v,`alignOffset`)??l(d,`alignOffset`)??0,j=g.avoidCollisions??s(v,`avoidCollisions`)??s(d,`avoidCollisions`)??!0,M=g.collisionPadding??l(v,`collisionPadding`)??l(d,`collisionPadding`)??8,N=!1,P=!1,F=!1,I=null,
|
|
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 f}from"@data-slot/core";let p=0;const m=[`top`,`right`,`bottom`,`left`],h=[`start`,`center`,`end`];function g(d,g={}){let _=u(d,`tooltip-trigger`),v=u(d,`tooltip-content`),y=u(d,`tooltip-positioner`),b=y&&v&&y.contains(v)?y:null,x=u(d,`tooltip-portal`),S=x&&b&&x.contains(b)?x:null;if(!_||!v)throw Error(`Tooltip requires trigger and content slots`);let C=g.delay??l(d,`delay`)??300,w=g.skipDelayDuration??l(d,`skipDelayDuration`)??300,T=g.onOpenChange,E=g.portal??s(v,`portal`)??s(d,`portal`)??!0,D=g.side??c(v,`side`,m)??c(d,`side`,m)??`top`,O=g.align??c(v,`align`,h)??c(d,`align`,h)??`center`,k=g.sideOffset??l(v,`sideOffset`)??l(d,`sideOffset`)??4,A=g.alignOffset??l(v,`alignOffset`)??l(d,`alignOffset`)??0,j=g.avoidCollisions??s(v,`avoidCollisions`)??s(d,`avoidCollisions`)??!0,M=g.collisionPadding??l(v,`collisionPadding`)??l(d,`collisionPadding`)??8,N=!1,P=!1,F=!1,I=!1,L=null,R=[],z=n({content:v,root:d,enabled:E,wrapperSlot:b?void 0:`tooltip-positioner`,container:b??void 0,mountTarget:b?S??b:void 0}),B=o(v,`tooltip-content`);v.setAttribute(`role`,`tooltip`),v.setAttribute(`data-side`,D),v.setAttribute(`data-align`,O);let V=e=>{let t=z.container;if(d.setAttribute(`data-state`,e),v.setAttribute(`data-state`,e),t!==v&&t.setAttribute(`data-state`,e),e===`open`){d.setAttribute(`data-open`,``),v.setAttribute(`data-open`,``),t!==v&&t.setAttribute(`data-open`,``),P?(d.setAttribute(`data-instant`,``),v.setAttribute(`data-instant`,``),t!==v&&t.setAttribute(`data-instant`,``)):(d.removeAttribute(`data-instant`),v.removeAttribute(`data-instant`),t!==v&&t.removeAttribute(`data-instant`)),d.removeAttribute(`data-closed`),v.removeAttribute(`data-closed`),t!==v&&t.removeAttribute(`data-closed`);return}d.setAttribute(`data-closed`,``),v.setAttribute(`data-closed`,``),t!==v&&t.setAttribute(`data-closed`,``),d.removeAttribute(`data-instant`),v.removeAttribute(`data-instant`),t!==v&&t.removeAttribute(`data-instant`),d.removeAttribute(`data-open`),v.removeAttribute(`data-open`),t!==v&&t.removeAttribute(`data-open`)},H=()=>{let t=z.container,n=d.ownerDocument.defaultView??window,r=e({anchorRect:_.getBoundingClientRect(),contentRect:v.getBoundingClientRect(),side:D,align:O,sideOffset:k,alignOffset:A,avoidCollisions:j,collisionPadding:M});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`,v.setAttribute(`data-side`,r.side),v.setAttribute(`data-align`,r.align),t!==v&&(t.setAttribute(`data-side`,r.side),t.setAttribute(`data-align`,r.align))},U=i({element:v,onExitComplete:()=>{I||(z.restore(),v.hidden=!0)}}),W=r({observedElements:[_,v],isActive:()=>N,ancestorScroll:!1,onUpdate:H}),G=()=>_.hasAttribute(`disabled`)||_.getAttribute(`aria-disabled`)===`true`,K=(e,t,n=!1)=>{N!==e&&(!e&&N&&w>0&&(p=Date.now()+w),P=e?n:!1,N=e,N?(_.setAttribute(`aria-describedby`,B),v.setAttribute(`aria-hidden`,`false`),z.mount(),v.hidden=!1,V(`open`),U.enter(),H(),W.start(),W.update()):(V(`closed`),_.removeAttribute(`aria-describedby`),v.setAttribute(`aria-hidden`,`true`),U.exit(),W.stop()),a(d,`tooltip:change`,{open:N,trigger:_,content:v,reason:t}),T?.(N))},q=e=>{if(L&&=(clearTimeout(L),null),Date.now()<p){K(!0,e,!0);return}L=setTimeout(()=>{K(!0,e),L=null},C)},J=e=>{L&&=(clearTimeout(L),null),K(!1,e)};return v.hidden=!0,v.setAttribute(`aria-hidden`,`true`),V(`closed`),R.push(f(_,`pointerenter`,e=>{e.pointerType!==`touch`&&(G()||q(`pointer`))}),f(_,`pointerleave`,e=>{if(e.pointerType===`touch`||F)return;let t=e.relatedTarget;t&&v.contains(t)||J(`pointer`)}),f(_,`focus`,()=>{F=!0,!G()&&q(`focus`)}),f(_,`blur`,()=>{F=!1,J(`blur`)})),R.push(f(v,`pointerleave`,e=>{if(e.pointerType===`touch`||F)return;let t=e.relatedTarget;t&&_.contains(t)||J(`pointer`)})),R.push(f(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(G())return;L&&=(clearTimeout(L),null),K(!0,`api`)}else J(`api`)})),R.push(t({root:d,isOpen:()=>N,onDismiss:()=>J(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{G()||(L&&=(clearTimeout(L),null),K(!0,`api`))},hide:()=>J(`api`),get isOpen(){return N},destroy:()=>{I=!0,L&&clearTimeout(L),W.stop(),U.cleanup(),z.cleanup(),R.forEach(e=>e()),R.length=0}}}const _=new WeakSet;function v(e=document){let t=[];for(let n of d(e,`tooltip`))_.has(n)||(_.add(n),t.push(g(n)));return t}export{v as create,g 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.90",
|
|
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.90"
|
|
42
42
|
}
|
|
43
43
|
}
|