initial commit

assets/cart-disclosure-tooltip.js

@@ -0,0 +1,45 @@
+(function () {
+  // Keeps the cart disclosure hover tooltip within the viewport.
+  // On hover we measure the tooltip and set a `--cart-disclosure-tooltip-shift`
+  // custom property that nudges it back into view;
+  // the arrow is counter-shifted in CSS so it keeps pointing at the icon.
+  const VIEWPORT_MARGIN = 16;
+
+  function positionTooltip(button) {
+    const tooltip = button.querySelector('.cart-item__disclosure-tooltip');
+    if (!tooltip) return;
+
+    // Reset before measuring so we read the natural, centered position.
+    tooltip.style.setProperty('--cart-disclosure-tooltip-shift', '0px');
+
+    const rect = tooltip.getBoundingClientRect();
+    const viewportWidth = document.documentElement.clientWidth;
+    let shift = 0;
+
+    if (rect.right > viewportWidth - VIEWPORT_MARGIN) {
+      shift = viewportWidth - VIEWPORT_MARGIN - rect.right;
+    } else if (rect.left < VIEWPORT_MARGIN) {
+      shift = VIEWPORT_MARGIN - rect.left;
+    }
+
+    tooltip.style.setProperty('--cart-disclosure-tooltip-shift', `${Math.round(shift)}px`);
+  }
+
+  function onPointerOver(event) {
+    const button = event.target.closest?.('.cart-item__disclosure');
+    if (!button || button.dataset.tooltipPositioned === 'true') return;
+
+    button.dataset.tooltipPositioned = 'true';
+    positionTooltip(button);
+  }
+
+  function onPointerOut(event) {
+    const button = event.target.closest?.('.cart-item__disclosure');
+    if (button && !button.contains(event.relatedTarget)) {
+      delete button.dataset.tooltipPositioned;
+    }
+  }
+
+  document.addEventListener('pointerover', onPointerOver);
+  document.addEventListener('pointerout', onPointerOut);
+})();