← Commit history

tooltips: CLAMP to viewport (never run off any edge), flip above when near bottom, arrow tracks the control after clamping

John Lauer ·6a21740ac3 ·3mo ago ·parent ed20398
3 files changed +28−7
package.json+1−1
@@ -2,7 +2,7 @@   "slug": "bq25792-charger",   "title": "BQ25792 Charger",   "type": "component",-  "version": "0.1.67",+  "version": "0.1.68",   "description": "BQ25792 Charger - buck-boost 1S-4S battery charger board by Adonis, with real 3D copper traces and measured stackup.",   "tags": [     "hardware"
page.json+10−3
@@ -4,9 +4,16 @@   "slug": "bq25792-charger",   "title": "BQ25792 Charger",   "brief": "Buck-boost 1S-4S battery charger board (TI BQ25792) with 14 Adom machine pins, by Adonis",-  "version": "0.1.67",+  "version": "0.1.68",   "tags": [-    "hardware"+    "adom",+    "adom-modular",+    "component",+    "charger",+    "battery",+    "bq25792",+    "power",+    "usb-c"   ],   "license": "proprietary",   "component": {@@ -49,7 +56,7 @@     "email": "[email protected]"   },   "visibility": "public",-  "description": "BQ25792 Charger - buck-boost 1S-4S battery charger board by Adonis, with real 3D copper traces and measured stackup.",+  "description": "BQ25792 Charger - a buck-boost 1S-4S battery charger board (Texas Instruments BQ25792) designed by Adonis in Fusion 360, with 14 Adom machine pins for the modular stack. Interactive colored 3D model, schematic and layout views.",   "dependencies": {},   "files": [     "README.md",
readme.html+17−3
@@ -66,8 +66,9 @@     border:1px solid rgba(0,184,177,0.35); border-radius:7px; white-space:nowrap;     box-shadow:0 6px 20px rgba(0,0,0,0.5); }   #tt.show { opacity:1; transform:translateY(0); }-  #tt::after { content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);+  #tt::after { content:""; position:absolute; top:-5px; left:var(--ax,50%); transform:translateX(-50%);     border:5px solid transparent; border-bottom-color:rgba(0,184,177,0.35); border-top:0; }+  #tt.flip::after { top:auto; bottom:-5px; border-bottom:0; border-top-color:rgba(0,184,177,0.35); }   .lp-iso { width:16px; height:16px; padding:0; margin-right:2px; border:1px solid #30363d; border-radius:4px;     background:transparent; color:#6e7681; font-size:11px; line-height:1; cursor:pointer; flex:none; }   .lp-iso:hover { color:#5ff5e8; border-color:#00b8b1; }@@ -604,8 +605,21 @@ exported bodies + design rules.</p>     let timer=null;     function place(el){       const r=el.getBoundingClientRect();-      tt.style.left=(r.left+r.width/2-tt.offsetWidth/2)+"px";-      tt.style.top=(r.bottom+9)+"px";+      const M=8, vw=document.documentElement.clientWidth, vh=document.documentElement.clientHeight;+      const w=tt.offsetWidth, h=tt.offsetHeight;+      // CLAMP horizontally so the tooltip NEVER runs off either edge+      const anchorX=r.left+r.width/2;+      let left=anchorX - w/2;+      left=Math.max(M, Math.min(left, vw - w - M));+      // below the control by default; flip ABOVE if it would run off the bottom+      let top=r.bottom+9, below=true;+      if(top + h > vh - M){ top=r.top - h - 9; below=false; }+      top=Math.max(M, Math.min(top, vh - h - M));+      tt.style.left=left+"px"; tt.style.top=top+"px";+      // keep the arrow pointing at the control even after clamping+      const arrowX=Math.max(10, Math.min(anchorX-left, w-10));+      tt.style.setProperty("--ax", arrowX+"px");+      tt.classList.toggle("flip", !below);     }     function show(el){ const t=el.getAttribute("data-tip"); if(!t) return; tt.textContent=t; tt.style.left="-9999px"; tt.classList.add("show"); place(el); }     function hide(){ tt.classList.remove("show"); }