tolltop 1.0.0 → 1.0.1

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.
Files changed (3) hide show
  1. package/README.md +1 -1
  2. package/index.js +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -13,7 +13,7 @@ npm install tolltop
13
13
  ### Script tag (CDN)
14
14
 
15
15
  ```html
16
- <script src="https://unpkg.com/tolltop"></script>
16
+ <script src="https://cdn.jsdelivr.net/npm/tolltop"></script>
17
17
  ```
18
18
 
19
19
  ### ES module
package/index.js CHANGED
@@ -1 +1 @@
1
- (()=>{const s=document.createElement('style');s.textContent=`[popover].tt{position:fixed;position-anchor:--tt;position-area:top;position-try-fallbacks:flip-block;inset:auto;margin:0 0 8px;padding:5px 9px;font:500 12px/1.4 ui-monospace,monospace;border-radius:5px;border:none;max-width:240px;pointer-events:none;z-index:2147483647;opacity:0;transition:opacity .1s ease}[popover].tt:popover-open{opacity:1}@starting-style{[popover].tt:popover-open{opacity:0}}[popover].tt.tt-light{background:#fff;color:#18181b;box-shadow:0 2px 10px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06)}[popover].tt.tt-dark{background:#18181b;color:#e4e4e7;box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}`;document.head.appendChild(s);const D=300;let tip=null,timer=null,anchor=null;function init(){if(tip)return tip;tip=document.createElement('div');tip.classList.add('tt');tip.setAttribute('popover','manual');document.body.appendChild(tip);return tip}function isDark(el){let n=el;while(n&&n!==document){const bg=getComputedStyle(n).backgroundColor;const m=bg.match(/\d+/g);if(m&&(m.length<4||+m[3]>0)){const[r,g,b]=m.map(Number);return r*.299+g*.587+b*.114<128}n=n.parentElement}return true}function show(el){const text=el.getAttribute('data-tooltip');if(!text)return;el.style.anchorName='--tt';const t=init();t.textContent=text;t.classList.toggle('tt-light',isDark(el));t.classList.toggle('tt-dark',!isDark(el));t.showPopover();anchor=el}function hide(){clearTimeout(timer);if(tip)try{tip.hidePopover()}catch{}if(anchor){anchor.style.anchorName='';anchor=null}}document.addEventListener('pointerenter',e=>{if(!e.target||!e.target.closest)return;const el=e.target.closest('[data-tooltip]');if(!el)return;hide();timer=setTimeout(()=>show(el),D)},true);document.addEventListener('pointerleave',e=>{if(!e.target||!e.target.closest)return;if(e.target.closest('[data-tooltip]'))hide()},true);document.addEventListener('keydown',e=>{if(e.key==='Escape')hide()})})();
1
+ (()=>{const s=document.createElement('style');s.textContent=`[popover].tt{position:fixed;position-anchor:--tt;position-area:top;position-try-fallbacks:flip-block;inset:auto;margin:0 0 8px;padding:5px 9px;font:500 12px/1.4 ui-monospace,monospace;border-radius:5px;border:none;max-width:240px;pointer-events:none;z-index:2147483647;opacity:0;transition:opacity .1s ease}[popover].tt:popover-open{opacity:1}@starting-style{[popover].tt:popover-open{opacity:0}}[popover].tt.tt-light{background:#fff;color:#18181b;box-shadow:0 2px 10px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06)}[popover].tt.tt-dark{background:#18181b;color:#e4e4e7;box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}`;document.head.appendChild(s);const D=300;let tip=null,timer=null,anchor=null;function ct(el){let n=el;while(n&&n!==document){if(n.nodeType===1&&n.hasAttribute&&n.hasAttribute('data-tooltip'))return n;n=n.parentNode}return null}function init(){if(tip)return tip;tip=document.createElement('div');tip.classList.add('tt');tip.setAttribute('popover','manual');document.body.appendChild(tip);return tip}function isDark(el){let n=el;while(n&&n!==document){const bg=getComputedStyle(n).backgroundColor;const m=bg.match(/\d+/g);if(m&&(m.length<4||+m[3]>0)){const[r,g,b]=m.map(Number);return r*.299+g*.587+b*.114<128}n=n.parentElement}return true}function show(el){const text=el.getAttribute('data-tooltip');if(!text)return;el.style.anchorName='--tt';const t=init();t.textContent=text;t.classList.toggle('tt-light',isDark(el));t.classList.toggle('tt-dark',!isDark(el));t.showPopover();anchor=el}function hide(){clearTimeout(timer);if(tip)try{tip.hidePopover()}catch{}if(anchor){anchor.style.anchorName='';anchor=null}}document.addEventListener('pointerenter',e=>{const el=ct(e.target);if(!el)return;hide();timer=setTimeout(()=>show(el),D)},true);document.addEventListener('pointerleave',e=>{if(ct(e.target))hide()},true);document.addEventListener('keydown',e=>{if(e.key==='Escape')hide()})})();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tolltop",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "One-attribute tooltips. Popover API + CSS Anchor Positioning. Auto-inverts color based on page background.",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",