jizy-tooltip 2.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-present Joffrey Demetz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# JiZy platform 
+

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

@@ -0,0 +1 @@
+@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}

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

@@ -0,0 +1,2 @@
+/*! jTooltip v2.1.0 | 2025-08-28T14:31Z | [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);

package/lib/index.js

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

package/lib/js/Tip.js

@@ -0,0 +1,31 @@
+export default class Tip {
+    constructor(el) {
+        this.el = el;
+        this.uuid = el.dataset.tipId || autoUuid();
+        this.header = el.dataset.tipHeader || '';
+        this.content = el.dataset.tip || '';
+        this.theme = el.dataset.tipTheme || '';
+        this.position = el.dataset.tipPosition || 'top';
+        this.coords = null;
+    }
+
+    setCoords() {
+        const rect = this.el.getBoundingClientRect();
+
+        this.coords = {
+            top: rect.top + window.scrollY,
+            left: rect.left + window.scrollX,
+            right: rect.right + window.scrollX,
+            bottom: rect.bottom + window.scrollY,
+            width: rect.width,
+            height: rect.height
+        };
+    }
+
+    autoUuid() {
+        if (crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+        return 'tip-' + Date.now() + Math.random().toString(16).slice(2);
+    }
+};

package/lib/js/Tooltip.js

@@ -0,0 +1,163 @@
+import Tip from './Tip.js';
+
+export default class Tooltip {
+    constructor(id = 'jTip', distance = 10) {
+        this.id = id;
+        this.distance = distance;
+        this.shown = null;
+        this.customRenderer = null;
+        this.element = null;
+        this.uuid = 1;
+    }
+
+    setRenderer(callback) {
+        if (typeof callback === 'function') {
+            this.customRenderer = callback;
+        }
+        return this;
+    }
+
+    ready() {
+        this.element = this.getElement();
+
+        document.body.addEventListener('keyup', (e) => {
+            if (e.key === 'Escape' || e.key === 'Esc') {
+                this.hide();
+            }
+        });
+
+        document.body.addEventListener('click', (e) => {
+            if (!this.element.contains(e.target)) {
+                this.hide();
+            }
+        });
+
+        document.body.addEventListener('touchstart', (e) => {
+            if (!this.element.contains(e.target)) {
+                this.hide();
+            }
+        });
+
+        return this;
+    }
+
+    getElement() {
+        let element = document.querySelector('#' + this.id);
+
+        if (!element || element.length === 0) {
+            element = document.createElement('div');
+            element.id = this.id;
+            document.body.appendChild(element);
+        }
+
+        element.setAttribute('role', 'tooltip');
+        element.setAttribute('aria-hidden', 'true');
+        element.classList.add('jtip', 'hidden');
+        return element;
+    }
+
+    position(trigger, position) {
+        let left, top;
+        const tipW = this.element.offsetWidth;
+        const tipH = this.element.offsetHeight;
+        const viewportW = document.documentElement.clientWidth;
+
+        if (position === 'center') {
+            top = trigger.top + trigger.height / 2 - tipH / 2;
+            left = trigger.left + trigger.width / 2 - tipW / 2;
+        } else if (position === 'left' || position === 'right') {
+            top = (trigger.top + trigger.bottom) / 2 - tipH / 2;
+            if (position === 'left') {
+                left = trigger.left - this.distance - tipW;
+                if (left < 0) left = this.distance;
+            } else {
+                left = trigger.right + this.distance;
+                if (left + tipW > viewportW) left = viewportW - tipW - this.distance;
+            }
+        } else {
+            left = trigger.left + (trigger.width - tipW) / 2;
+            top = position === 'bottom' ? trigger.bottom + this.distance : trigger.top - tipH - this.distance;
+        }
+
+        if (left < 0) left = trigger.left;
+        if (top < 0) top = trigger.bottom + this.distance;
+
+        this.element.style.left = left + 'px';
+        this.element.style.top = top + window.pageYOffset + 'px';
+    }
+
+    cleanClasses() {
+        this.element.className.split(' ').forEach((item) => {
+            if (item.match(/theme-|arrow|top|right|bottom|left/)) {
+                this.element.classList.remove(item);
+            }
+        });
+    }
+
+    show(tip) {
+        if (this.shown === tip.uuid) return;
+
+        tip.setCoords();
+        this.shown = tip.uuid;
+        this.cleanClasses();
+
+        this.element.innerHTML = this.renderer ? this.renderer(tip) : this.getTemplate(tip);
+        this.element.classList.add(tip.position);
+
+        if (tip.theme) {
+            tip.theme.split(' ').forEach(theme => {
+                this.element.classList.add(theme);
+            });
+        }
+
+        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) {
+        if (this.shown && (!tip || tip.uuid === this.shown)) {
+            this.shown = null;
+            this.element.classList.remove('fade-in');
+            this.element.classList.add('fade-out');
+
+            setTimeout(() => {
+                this.element.innerHTML = '';
+                this.cleanClasses();
+                this.element.classList.add('hidden');
+                this.element.classList.remove('fade-out');
+                this.element.setAttribute('aria-hidden', 'true');
+            }, 200);
+        }
+    }
+
+    getTemplate(tip) {
+        let html = '<div>';
+        if (tip.header) {
+            html += '<div class="tip-header">' + tip.header + '</div>';
+        }
+        html += '<div class="tip-content">' + tip.content + '</div>';
+        html += '</div>';
+        return html;
+    }
+
+    fromElement(el) {
+        if (!el) return;
+
+        if (!el.dataset.tipId) {
+            el.dataset.tipId = 'd-' + this.uuid++;
+        }
+
+        const tip = new Tip(el);
+
+        this.show(tip);
+    }
+
+    // @COMPAT
+
+    init() {
+        this.ready();
+    }
+};

package/lib/less/animations.less

@@ -0,0 +1,22 @@
+@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/structure.less

@@ -0,0 +1,90 @@
+.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;
+// }

package/lib/less/variables.less

@@ -0,0 +1,5 @@
+@tooltip-font-family: inherit;
+@tooltip-font-size: 14px;
+@tooltip-width: 170px;
+@tooltip-bg-color: #333;
+@tooltip-fg-color: #FFF;

package/lib/tooltip.less

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

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "jizy-tooltip",
+  "version": "2.1.0",
+  "browser": "dist/js/jizy-tooltip.min.js",
+  "main": "lib/index.js",
+  "type": "module",
+  "jizy": "dist/",
+  "files": [
+    "dist/*",
+    "lib/*"
+  ],
+  "scripts": {
+    "jpack:export": "node ./cli/jpack.js --action build --name perso",
+    "jpack:export-debug": "node ./cli/jpack.js --action build --name perso --debug",
+    "jpack:dist": "node ./cli/jpack.js",
+    "jpack:dist-debug": "node ./cli/jpack.js --debug"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/joffreydemetz/jizy-tooltip.git"
+  },
+  "keywords": [
+    "JiZy",
+    "JS",
+    "Tooltip"
+  ],
+  "author": "Joffrey Demetz <joffrey.demetz@gmail.com> (https://joffreydemetz.com/)",
+  "license": "MIT",
+  "description": "A lightweight JS tooltip module",
+  "devDependencies": {
+    "jizy-packer": "^2.1"
+  }
+}