@erain20029/tooltips 2.0.12 → 2.0.16

package/dist/tooltip-overlay.es.js

@@ -0,0 +1,149 @@
+const w = ".overlay{background:#fff;color:#111;position:fixed;border-radius:10px;z-index:99999;box-shadow:0 0 34px #223c5033;overflow:hidden}.tooltip-card{display:flex;height:100%;align-items:center;gap:16px;padding:16px 20px;max-width:500px;box-sizing:border-box}.tooltip-media{display:flex;justify-content:center}.tooltip-image{width:120px;height:120px;object-fit:cover;border-radius:8px}.tooltip-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.tooltip-text div{width:100%;display:block}.tooltip-title{font-weight:600;line-height:1.3}.tooltip-desc{line-height:1.5;overflow-wrap:anywhere}", p = {
+  tooltips: [],
+  ready: !1
+}, m = /* @__PURE__ */ new Set();
+function y(t) {
+  return m.has(t) ? Promise.resolve() : new Promise((e, o) => {
+    const i = document.createElement("script");
+    i.src = t, i.async = !0, i.onload = () => {
+      m.add(t), e();
+    }, i.onerror = () => o(new Error(`Failed to load script: ${t}`)), document.head.appendChild(i);
+  });
+}
+async function h() {
+  if (p.ready) return;
+  const t = localStorage.getItem("product");
+  if (!t) return;
+  const e = JSON.parse(t).id;
+  await y(`http://localhost:3000/documentation/${e}/tooltip.js`), p.tooltips = await window.tooltipGetter(), p.ready = !0;
+}
+async function b(t) {
+  await h();
+  const e = t.target;
+  if (!(e instanceof Element)) return;
+  const o = p.tooltips.find(
+    (v) => e.matches(v.selector)
+  );
+  if (!o) return;
+  const i = e.getBoundingClientRect(), l = k(i), { x: n, y: s } = C(
+    l,
+    i.left,
+    i.top
+  );
+  H({
+    tooltip: o,
+    rect: i,
+    x: n,
+    y: s
+  });
+}
+function $(t) {
+  r && (t.target === r || t.target === u) && x();
+}
+let g = !1;
+async function L() {
+  g || (g = !0, await h(), document.addEventListener(
+    "mouseenter",
+    b,
+    !0
+  ), document.addEventListener(
+    "mouseleave",
+    $,
+    !0
+  ));
+}
+function T({ title: t, description: e, image: o }) {
+  const i = (n) => n === "center" || n === "right" ? n : "left", l = (n) => n === "top" || n === "right" ? n : "left";
+  return {
+    title: i(t),
+    description: i(e),
+    image: l(o)
+  };
+}
+function z({ title: t, description: e }) {
+  const o = {
+    small: 14,
+    medium: 16,
+    large: 20
+  };
+  return {
+    title: o[t] ?? 16,
+    description: o[e] ?? 14
+  };
+}
+const d = 500, f = 200;
+let c = 0, a = 0, r = null, u = null;
+function x() {
+  r && (r.remove(), r = null, u = null);
+}
+function C(t, e, o) {
+  switch (t) {
+    case "left-bottom":
+      c = e, a = o + 36;
+      break;
+    case "right-bottom":
+      c = e - d + 45, a = o + 36;
+      break;
+    case "left-top":
+      c = e, a = o - f - 18;
+      break;
+    case "right-top":
+      c = e - d + 45, a = o - f - 18;
+      break;
+  }
+  return { x: c, y: a };
+}
+function E() {
+  const t = document.createElement("style");
+  t.textContent = w, document.body.appendChild(t);
+}
+function S(t) {
+  const e = document.createElement("div");
+  return e.className = t, e;
+}
+function H(t) {
+  if (!t?.tooltip) return null;
+  x();
+  const e = t.tooltip, o = S("overlay");
+  o.style.position = "fixed", o.style.width = `${d}px`, o.style.height = `${f}px`, o.style.left = `${t.x}px`, o.style.top = `${t.y}px`;
+  const i = z({
+    title: e.size.title,
+    description: e.size.description
+  }), l = T({
+    title: e.position.title,
+    description: e.position.description,
+    image: e.position.image
+  });
+  console.log(e);
+  const s = e.image ? `<img class="tooltip-image" src="http://localhost:3000${e.image}" alt="" />` : "";
+  return o.innerHTML = `
+        ${l.image === "top" ? `<div class="tooltip-media">
+                ${s}
+            </div>` : ""}
+        <div class="tooltip-card">
+            ${l.image === "left" ? `<div class="tooltip-media">
+                    ${s}
+                </div>` : ""}
+
+            <div class="tooltip-text">
+                <div class="tooltip-title" style="font-size: ${i.title}px; text-align: ${l.title}">
+                    ${e.title}
+                </div>
+                <div class="tooltip-desc" style="font-size: ${i.description}px; text-align: ${l.description}">
+                    ${e.description}
+                </div>
+            </div>
+
+            ${l.image === "right" ? `<div class="tooltip-media">
+                    ${s}
+                </div>` : ""}
+        </div>
+    `, document.body.appendChild(o), E(), r = o, u = t.rect, o;
+}
+function k(t) {
+  const e = window.innerWidth / 2, o = window.innerHeight / 2, i = t.left + t.width / 2, l = t.top + t.height / 2, n = i < e, s = l < o;
+  return n && s ? "left-bottom" : !n && s ? "right-bottom" : n && !s ? "left-top" : "right-top";
+}
+export {
+  L as initTooltips
+};

package/package.json

@@ -1,45 +1,22 @@
 {
   "name": "@erain20029/tooltips",
-  "private": false,
-  "version": "2.0.12",
+  "version": "2.0.16",
   "description": "Universal tooltip overlay for any HTML project",
-  "main": "dist/tooltip-overlay.js",
+  "license": "MIT",
+  "author": "Erik",
+  "type": "module",
+  "main": "dist/index.js",
   "style": "dist/tooltip.css",
+  "exports": {
+    ".": "./dist/index.js"
+  },
   "files": [
     "dist"
   ],
-  "keywords": [
-    "tooltip",
-    "overlay",
-    "html",
-    "js"
-  ],
-  "author": "Erik",
-  "license": "MIT",
-  "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build && cp src/tooltip/tooltip.css dist/tooltip.css",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "build": "vite build && cp src/tooltip/tooltip.css dist/tooltip.css"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "tailwindcss": "^3.4.19",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"
   }
 }