jizy-tooltip 2.1.3 → 2.2.7

package/dist/css/jizy-tooltip.min.css

@@ -1,2 +1,2 @@
-/*! jTooltip v2.1.3 | MIT | 2026-04-23T09:35Z | [default] */
-@keyframes tooltip-anim{0%{opacity:0;transform:matrix(.5,0,0,.8,0,0)}20%{transform:matrix(1,0,0,1,0,0)}40%{opacity:1}70%{transform:matrix(1,0,0,1,0,0)}to{transform:matrix(1,0,0,1,0,0)}}.tooltip{animation:tooltip-anim .7s;background-color:#333;border-radius:4px;box-shadow:0 0 4px hsla(0,0%,100%,.7);color:#fff;font-family:inherit;font-size:14px;line-height:1;max-width:170px;opacity:0;position:absolute;text-align:center;transform:translateZ(0);transition:opacity .8s;z-index:234567891}.tooltip:empty{display:none!important;opacity:0!important}.tooltip .tip-header{border-bottom:1px solid #fff;padding:2px 4px}.tooltip .tip-content{padding:8px 10px}.tooltip.arrow:after{border:0 solid transparent;box-shadow:0 0 4px hsla(0,0%,100%,.7);content:"";display:block;position:absolute}.tooltip.arrow.left:after,.tooltip.arrow.right:after{top:50%;transform:translateY(-50%)}.tooltip.arrow.bottom:after,.tooltip.arrow.top:after{left:50%;transform:translateX(-50%)}.tooltip.arrow.left:after{border-left-color:#333;border-width:6px 0 6px 8px;right:-8px}.tooltip.arrow.right:after{border-right-color:#333;border-width:6px 8px 6px 0;left:-8px}.tooltip.arrow.bottom:after{border-top-color:#333;border-width:0 6px 8px;top:-8px}.tooltip.arrow.top:after{border-bottom-color:#333;border-width:8px 6px 0;bottom:-8px}
+/*! jTooltip v2.2.7 | MIT | 2026-06-01T11:24Z | [default] */
+:root{--jizy-tooltip-font-family:inherit;--jizy-tooltip-font-size:14px;--jizy-tooltip-width:170px;--jizy-tooltip-bg-color:#333;--jizy-tooltip-fg-color:#fff}.jtip{background-color:var(--jizy-tooltip-bg-color);border-radius:4px;box-shadow:0 0 4px rgba(0,0,0,.25);color:var(--jizy-tooltip-fg-color);font-family:var(--jizy-tooltip-font-family);font-size:var(--jizy-tooltip-font-size);line-height:1;max-width:var(--jizy-tooltip-width);opacity:0;pointer-events:none;position:absolute;text-align:center;transform:translateZ(0);transition:opacity .25s ease;z-index:234567891}.jtip.fade-in{opacity:1}.jtip.fade-out{opacity:0}.jtip.hidden{display:none}.jtip:empty{display:none!important;opacity:0!important}.jtip .tip-header{border-bottom:1px solid var(--jizy-tooltip-fg-color);padding:2px 4px}.jtip .tip-content{padding:8px 10px}.jtip:after{border:0 solid transparent;content:"";display:block;position:absolute}.jtip.left:after,.jtip.right:after{top:var(--jtip-arrow-y,50%);transform:translateY(-50%)}.jtip.bottom:after,.jtip.top:after{left:var(--jtip-arrow-x,50%);transform:translateX(-50%)}.jtip.left:after{border-left-color:var(--jizy-tooltip-bg-color);border-width:6px 0 6px 8px;right:-8px}.jtip.right:after{border-right-color:var(--jizy-tooltip-bg-color);border-width:6px 8px 6px 0;left:-8px}.jtip.top:after{border-top-color:var(--jizy-tooltip-bg-color);border-width:8px 6px 0;bottom:-8px}.jtip.bottom:after{border-bottom-color:var(--jizy-tooltip-bg-color);border-width:0 6px 8px;top:-8px}

package/dist/js/jizy-tooltip.min.js

@@ -1,2 +1,2 @@
-/*! jTooltip v2.1.3 | MIT | 2026-04-23T09:35Z | [default] */
-!function(t){"use strict";if("object"!=typeof t||!t||!t.document)throw new Error("jTooltip requires a window and a document");if(void 0!==t.jTooltip)throw new Error("jTooltip is already defined");!function(){class t{constructor(t){this.el=t,this.uuid=t.dataset.tipId||autoUuid(),this.header=t.dataset.tipHeader||"",this.content=t.dataset.tip||"",this.theme=t.dataset.tipTheme||"",this.position=t.dataset.tipPosition||"top",this.coords=null}setCoords(){const t=this.el.getBoundingClientRect();this.coords={top:t.top+window.scrollY,left:t.left+window.scrollX,right:t.right+window.scrollX,bottom:t.bottom+window.scrollY,width:t.width,height:t.height}}autoUuid(){return crypto.randomUUID?crypto.randomUUID():"tip-"+Date.now()+Math.random().toString(16).slice(2)}}}();t.jTooltip=Tooltip}("undefined"!=typeof window?window:this);
+/*! jTooltip v2.2.7 | MIT | 2026-06-01T11:24Z | [default] */
+!function(t){"use strict";if("object"!=typeof t||!t||!t.document)throw new Error("jTooltip requires a window and a document");if(void 0!==t.jTooltip)throw new Error("jTooltip is already defined");var e=function(t){class e{constructor(t){this.el=t,this.uuid=t.dataset.tipId||this.autoUuid(),this.header=t.dataset.tipHeader||"",this.content=t.dataset.tip||"",this.theme=t.dataset.tipTheme||"",this.position=t.dataset.tipPosition||"top",this.coords=null}setCoords(){const t=this.el.getBoundingClientRect();this.coords={top:t.top+window.scrollY,left:t.left+window.scrollX,right:t.right+window.scrollX,bottom:t.bottom+window.scrollY,width:t.width,height:t.height}}autoUuid(){return crypto.randomUUID?crypto.randomUUID():"tip-"+Date.now()+Math.random().toString(16).slice(2)}}return t.Tooltip=class{constructor(t="jTip",e=10){this.id=t,this.distance=e,this.shown=null,this.customRenderer=null,this.element=null,this.uuid=1,this.hideTimer=null}setRenderer(t){return"function"==typeof t&&(this.customRenderer=t),this}ready(){return this.element=this.getElement(),document.body.addEventListener("keyup",t=>{"Escape"!==t.key&&"Esc"!==t.key||this.hide()}),document.body.addEventListener("click",t=>{this.element.contains(t.target)||this.hide()}),document.body.addEventListener("touchstart",t=>{this.element.contains(t.target)||this.hide()}),this}getElement(){let t=document.querySelector("#"+this.id);return t&&0!==t.length||(t=document.createElement("div"),t.id=this.id,document.body.appendChild(t)),t.setAttribute("role","tooltip"),t.setAttribute("aria-hidden","true"),t.classList.add("jtip","hidden"),t}position(t,e){let i,s;const o=this.element.offsetWidth,n=this.element.offsetHeight,h=document.documentElement.clientWidth;"center"===e?(s=t.top+t.height/2-n/2,i=t.left+t.width/2-o/2):"left"===e||"right"===e?(s=(t.top+t.bottom)/2-n/2,"left"===e?(i=t.left-this.distance-o,i<0&&(i=this.distance)):(i=t.right+this.distance,i+o>h&&(i=h-o-this.distance))):(i=t.left+(t.width-o)/2,s="bottom"===e?t.bottom+this.distance:t.top-n-this.distance),i<0&&(i=t.left),s<0&&(s=t.bottom+this.distance);const d=t.left+t.width/2,l=t.top+t.height/2,r=Math.max(12,Math.min(o-12,d-i)),a=Math.max(12,Math.min(n-12,l-s));this.element.style.setProperty("--jtip-arrow-x",r+"px"),this.element.style.setProperty("--jtip-arrow-y",a+"px"),this.element.style.left=i+"px",this.element.style.top=s+"px"}cleanClasses(){this.element.className.split(" ").forEach(t=>{t.match(/theme-|arrow|top|right|bottom|left/)&&this.element.classList.remove(t)})}show(t){this.shown!==t.uuid&&(this.hideTimer&&(clearTimeout(this.hideTimer),this.hideTimer=null),t.setCoords(),this.shown=t.uuid,this.cleanClasses(),this.element.innerHTML=this.customRenderer?this.customRenderer(t):this.getTemplate(t),this.element.classList.add(t.position),t.theme&&t.theme.split(" ").forEach(t=>{this.element.classList.add(t)}),this.element.classList.remove("fade-out"),this.element.classList.remove("hidden"),this.position(t.coords,t.position),this.element.setAttribute("aria-hidden","false"),this.element.classList.add("fade-in"))}hide(t){!this.shown||t&&t.uuid!==this.shown||(this.shown=null,this.element.classList.remove("fade-in"),this.element.classList.add("fade-out"),this.hideTimer=setTimeout(()=>{this.hideTimer=null,this.element.innerHTML="",this.cleanClasses(),this.element.classList.add("hidden"),this.element.classList.remove("fade-out"),this.element.setAttribute("aria-hidden","true")},200))}getTemplate(t){let e="<div>";return t.header&&(e+='<div class="tip-header">'+t.header+"</div>"),e+='<div class="tip-content">'+t.content+"</div>",e+="</div>",e}fromElement(t){if(!t)return;t.dataset.tipId||(t.dataset.tipId="d-"+this.uuid++);const i=new e(t);this.show(i)}init(){this.ready()}},t}({});t.jTooltip=e.Tooltip}("undefined"!=typeof window?window:this);

package/lib/index.js

@@ -1,4 +1,3 @@
-import Tooltip from './js/Tooltip.js';
-import Tip from './js/Tip.js';
-
-export default { Tooltip, Tip };
+import Tooltip from './js/Tooltip.js';
+
+export { Tooltip };

package/lib/js/Tip.js

@@ -1,7 +1,7 @@
 export default class Tip {
     constructor(el) {
         this.el = el;
-        this.uuid = el.dataset.tipId || autoUuid();
+        this.uuid = el.dataset.tipId || this.autoUuid();
         this.header = el.dataset.tipHeader || '';
         this.content = el.dataset.tip || '';
         this.theme = el.dataset.tipTheme || '';

package/lib/js/Tooltip.js

@@ -8,6 +8,7 @@ export default class Tooltip {
         this.customRenderer = null;
         this.element = null;
         this.uuid = 1;
+        this.hideTimer = null;
     }
 
     setRenderer(callback) {
@@ -82,8 +83,20 @@ export default class Tooltip {
         if (left < 0) left = trigger.left;
         if (top < 0) top = trigger.bottom + this.distance;
 
+        // Point the arrow at the trigger's centre rather than the tip's centre:
+        // when the tip is shifted (e.g. clamped to the viewport edge) the arrow
+        // must track the trigger, not sit in the middle of the box.
+        const triggerCx = trigger.left + trigger.width / 2;
+        const triggerCy = trigger.top + trigger.height / 2;
+        const arrowX = Math.max(12, Math.min(tipW - 12, triggerCx - left));
+        const arrowY = Math.max(12, Math.min(tipH - 12, triggerCy - top));
+        this.element.style.setProperty('--jtip-arrow-x', arrowX + 'px');
+        this.element.style.setProperty('--jtip-arrow-y', arrowY + 'px');
+
+        // trigger coords already include the scroll offset (setCoords adds
+        // scrollX/scrollY), so don't add it again here.
         this.element.style.left = left + 'px';
-        this.element.style.top = top + window.pageYOffset + 'px';
+        this.element.style.top = top + 'px';
     }
 
     cleanClasses() {
@@ -97,11 +110,18 @@ export default class Tooltip {
     show(tip) {
         if (this.shown === tip.uuid) return;
 
+        // cancel any pending hide so moving between triggers doesn't blank the
+        // freshly-shown tip mid-transition.
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+
         tip.setCoords();
         this.shown = tip.uuid;
         this.cleanClasses();
 
-        this.element.innerHTML = this.renderer ? this.renderer(tip) : this.getTemplate(tip);
+        this.element.innerHTML = this.customRenderer ? this.customRenderer(tip) : this.getTemplate(tip);
         this.element.classList.add(tip.position);
 
         if (tip.theme) {
@@ -110,11 +130,19 @@ export default class Tooltip {
             });
         }
 
+        // Drop any leftover fade-out from a still-pending hide of a previous
+        // trigger — otherwise it wins over fade-in (later in the cascade) and
+        // the freshly-shown tip stays invisible when switching fast.
+        this.element.classList.remove('fade-out');
+
+        // Lay the element out (still transparent via the base .jtip opacity:0)
+        // BEFORE measuring/positioning — otherwise offsetWidth/Height read 0
+        // while it is display:none and the placement math collapses.
+        this.element.classList.remove('hidden');
         this.position(tip.coords, tip.position);
 
         this.element.setAttribute('aria-hidden', 'false');
         this.element.classList.add('fade-in');
-        this.element.classList.remove('hidden');
     }
 
     hide(tip) {
@@ -123,7 +151,8 @@ export default class Tooltip {
             this.element.classList.remove('fade-in');
             this.element.classList.add('fade-out');
 
-            setTimeout(() => {
+            this.hideTimer = setTimeout(() => {
+                this.hideTimer = null;
                 this.element.innerHTML = '';
                 this.cleanClasses();
                 this.element.classList.add('hidden');

package/lib/less/structure.less

@@ -1,90 +1,104 @@
-.tooltip {
-	// display: block;
-	max-width: @tooltip-width;
-	position: absolute;
-	opacity: 0;
-	border-radius: 4px;
-	background-color: @tooltip-bg-color;
-	font-family: @tooltip-font-family;
-	font-size: @tooltip-font-size;
-	line-height: 1;
-	color: @tooltip-fg-color;
-	text-align: center;
-	transition: opacity .8s;
-	transform: translateZ(0); // GPU
-	box-shadow: 0 0 4px rgba(255, 255, 255, .7);
-	animation: tooltip-anim .7s;
-	z-index: 234567891;
-
-	&:empty {
-		display: none !important;
-		opacity: 0 !important;
-	}
-
-	.tip-header {
-		padding: 2px 4px;
-		border-bottom: 1px solid @tooltip-fg-color;
-	}
-
-	.tip-content {
-		padding: 8px 10px;
-	}
-
-	&.arrow {
-		&::after {
-			position: absolute;
-			display: block;
-			content: "";
-			border: 0 solid transparent;
-			box-shadow: 0 0 4px rgba(255, 255, 255, .7);
-		}
-
-		// position arrow in the center Y
-		&.left::after,
-		&.right::after {
-			top: 50%;
-			transform: translateY(-50%);
-		}
-
-		// position arrow in the center X
-		&.top::after,
-		&.bottom::after {
-			left: 50%;
-			transform: translateX(-50%);
-		}
-
-		// position arrow on the right
-		&.left::after {
-			right: -8px;
-			border-width: 6px 0 6px 8px;
-			border-left-color: @tooltip-bg-color;
-		}
-
-		// position arrow on the left
-		&.right::after {
-			left: -8px;
-			border-width: 6px 8px 6px 0;
-			border-right-color: @tooltip-bg-color;
-		}
-
-		// position arrow in the top
-		&.bottom::after {
-			top: -8px;
-			border-width: 0 6px 8px 6px;
-			border-top-color: @tooltip-bg-color;
-		}
-
-		// position arrow in the bottom
-		&.top::after {
-			bottom: -8px;
-			border-width: 8px 6px 0 6px;
-			border-bottom-color: @tooltip-bg-color;
-		}
-	}
-}
-
-// [data-tooltip] {
-// cursor: pointer;
-// color: #7cb342;
-// display: inline-block;
-// }
+// The singleton tip element (id #jTip) gets the base class `jtip` plus state
+// classes toggled by Tooltip.js at runtime:
+//   .hidden            — not currently shown (default)
+//   .fade-in           — visible (opacity transition in)
+//   .fade-out          — transitioning out
+//   .top/.bottom/.left/.right — placement relative to the trigger (drives arrow)
+.jtip {
+	position: absolute;
+	max-width: var(--jizy-tooltip-width);
+	border-radius: 4px;
+	background-color: var(--jizy-tooltip-bg-color);
+	font-family: var(--jizy-tooltip-font-family);
+	font-size: var(--jizy-tooltip-font-size);
+	line-height: 1;
+	color: var(--jizy-tooltip-fg-color);
+	text-align: center;
+	box-shadow: 0 0 4px rgba(0, 0, 0, .25);
+	transform: translateZ(0); // GPU
+	z-index: 234567891;
+
+	// Visibility is driven by the state classes, not by a one-shot animation —
+	// the element is a reused singleton, so a mount animation would only ever
+	// play once.
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity .25s ease;
+
+	&.fade-in {
+		opacity: 1;
+	}
+
+	&.fade-out {
+		opacity: 0;
+	}
+
+	&.hidden {
+		display: none;
+	}
+
+	&:empty {
+		display: none !important;
+		opacity: 0 !important;
+	}
+
+	.tip-header {
+		padding: 2px 4px;
+		border-bottom: 1px solid var(--jizy-tooltip-fg-color);
+	}
+
+	.tip-content {
+		padding: 8px 10px;
+	}
+
+	// Arrow — rendered for every placed tip, pointing back at the trigger.
+	&::after {
+		position: absolute;
+		display: block;
+		content: "";
+		border: 0 solid transparent;
+	}
+
+	// Arrow offset along the relevant edge is set by Tooltip.js (--jtip-arrow-x
+	// / --jtip-arrow-y) so the arrow points at the trigger even when the tip is
+	// shifted; falls back to centred if the script hasn't set it.
+	&.left::after,
+	&.right::after {
+		top: var(--jtip-arrow-y, 50%);
+		transform: translateY(-50%);
+	}
+
+	&.top::after,
+	&.bottom::after {
+		left: var(--jtip-arrow-x, 50%);
+		transform: translateX(-50%);
+	}
+
+	// tip sits to the LEFT of the trigger → arrow on the tip's right edge
+	&.left::after {
+		right: -8px;
+		border-width: 6px 0 6px 8px;
+		border-left-color: var(--jizy-tooltip-bg-color);
+	}
+
+	// tip sits to the RIGHT of the trigger → arrow on the tip's left edge
+	&.right::after {
+		left: -8px;
+		border-width: 6px 8px 6px 0;
+		border-right-color: var(--jizy-tooltip-bg-color);
+	}
+
+	// tip sits ABOVE the trigger → arrow on the tip's bottom edge
+	&.top::after {
+		bottom: -8px;
+		border-width: 8px 6px 0 6px;
+		border-top-color: var(--jizy-tooltip-bg-color);
+	}
+
+	// tip sits BELOW the trigger → arrow on the tip's top edge
+	&.bottom::after {
+		top: -8px;
+		border-width: 0 6px 8px 6px;
+		border-bottom-color: var(--jizy-tooltip-bg-color);
+	}
+}

package/lib/less/theme.less

@@ -0,0 +1,18 @@
+/*
+ * Default theming exposed as CSS custom properties.
+ *
+ * Override at `:root` from a consumer stylesheet loaded AFTER this CSS:
+ *
+ *   :root {
+ *     --jizy-tooltip-bg-color: #1a1a1a;
+ *     --jizy-tooltip-fg-color: #eee;
+ *     --jizy-tooltip-width: 220px;
+ *   }
+ */
+:root {
+    --jizy-tooltip-font-family: inherit;
+    --jizy-tooltip-font-size: 14px;
+    --jizy-tooltip-width: 170px;
+    --jizy-tooltip-bg-color: #333;
+    --jizy-tooltip-fg-color: #fff;
+}

package/lib/tooltip.less

@@ -1,4 +1,2 @@
-@import (optional) url("less/_variables.less");
-@import url("less/variables.less");
-@import url("less/animations.less");
-@import url("less/structure.less");
+@import url("less/theme.less");
+@import url("less/structure.less");

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "jizy-tooltip",
-  "version": "2.1.3",
+  "version": "2.2.7",
   "browser": "dist/js/jizy-tooltip.min.js",
   "main": "lib/index.js",
   "type": "module",
   "jizy": "dist/",
-  "keywords": [
-    "JiZy",
-    "JS",
-    "Tooltip"
-  ],
   "author": "Joffrey Demetz <joffrey.demetz@gmail.com> (https://joffreydemetz.com/)",
   "license": "MIT",
   "description": "A lightweight JS tooltip module",
   "homepage": "https://jizy.joffreydemetz.com/tooltip",
+  "keywords": [
+    "JiZy",
+    "Tooltip"
+  ],
   "files": [
     "dist/*",
     "lib/*"
   ],
   "scripts": {
-    "jpack:dist": "node ./cli/jpack.js"
+    "jpack:dist": "node ./cli/jpack.js",
+    "test": "node --test \"tests/*.test.js\""
   },
   "repository": {
     "type": "git",
@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "jizy-packer": "^2.1.44",
+    "jsdom": "^25.0.1",
     "less": "^4.4.1"
   }
 }

package/lib/less/animations.less

@@ -1,22 +0,0 @@
-@keyframes tooltip-anim {
-  0% {
-    opacity: 0;
-    transform: matrix(0.5, 0, 0, 0.8, 0, 0);
-  }
-
-  20% {
-    transform: matrix(1, 0, 0, 1, 0, 0);
-  }
-
-  40% {
-    opacity: 1;
-  }
-
-  70% {
-    transform: matrix(1, 0, 0, 1, 0, 0);
-  }
-
-  100% {
-    transform: matrix(1, 0, 0, 1, 0, 0);
-  }
-}

package/lib/less/variables.less

@@ -1,7 +0,0 @@
-@desktop-breakpoint: 768px;
-@mobile-breakpoint: @desktop-breakpoint - 1px;
-@tooltip-font-family: inherit;
-@tooltip-font-size: 14px;
-@tooltip-width: 170px;
-@tooltip-bg-color: #333;
-@tooltip-fg-color: #FFF;