@nu-appdev/northwestern-starlight-theme 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.1] - 2026-03-27
+
+### Fixed
+
+- Tooltips on mobile rendered outside the viewport near screen edges. Horizontal position now clamps with 8px padding; arrow shifts to track the trigger.
+- Tooltips stayed visible while scrolling on touch devices. Dismisses when the trigger moves 50px from its open position or leaves the viewport.
+- Tapping a tooltip after scroll-dismiss had no effect. Trigger now blurs on scroll-dismiss so the next tap re-focuses.
+- Tooltips near the top of the page overlapped Starlight's fixed header and "On this page" dropdown. Flips to bottom when space above is insufficient (100px header safe zone).
+
 ## [1.3.0] - 2026-03-26
 
 ### Added
@@ -121,7 +130,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - OpenAPI plugin compatibility with method badge preservation
 - Reduced motion support for transitions
 
-[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.3.0...HEAD
+[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.3.1...HEAD
+[1.3.1]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.3.0...v1.3.1
 [1.3.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.2.0...v1.3.0
 [1.2.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.1...v1.2.0
 [1.1.1]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.0...v1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-appdev/northwestern-starlight-theme",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A Northwestern-branded theme for Astro Starlight",
   "license": "MIT",
   "author": "Danny Foster <danny@northwestern.edu>",

package/src/components/Tooltip.astro

@@ -66,15 +66,25 @@ if (resolvedColor) {
             if (!trigger || !content) return;
 
             let isVisible = false;
+            let openY = 0;
             const hasPopover = "showPopover" in content;
+            const preferredSide = wrapper.classList.contains("nu-tooltip--bottom") ? "bottom" : "top";
 
             function onScroll() {
-                if (isVisible) position();
+                if (!isVisible) return;
+                const rect = trigger!.getBoundingClientRect();
+                if (rect.bottom < 0 || rect.top > window.innerHeight || Math.abs(rect.top - openY) > 50) {
+                    trigger!.blur();
+                    hide();
+                    return;
+                }
+                position();
             }
 
             function show() {
                 if (isVisible) return;
                 isVisible = true;
+                openY = trigger!.getBoundingClientRect().top;
                 if (hasPopover) {
                     content!.showPopover();
                 } else {
@@ -102,17 +112,52 @@ if (resolvedColor) {
 
             function position() {
                 const rect = trigger!.getBoundingClientRect();
-                const side = wrapper.classList.contains("nu-tooltip--bottom") ? "bottom" : "top";
+                const preferred = preferredSide;
                 const gap = 8;
+                const pad = 8;
+                const vw = document.documentElement.clientWidth;
+
+                // Measure tooltip height to decide if we need to flip
+                content!.style.transform = "";
+                content!.style.left = "0";
+                content!.style.top = "0";
+                const tipHeight = content!.offsetHeight;
+                const tipWidth = content!.offsetWidth;
+
+                // Reserve space for fixed header + mobile TOC (~100px)
+                const headerZone = 100;
+
+                // Auto-flip: if preferred side would overflow, use the other
+                const spaceAbove = rect.top - headerZone - gap;
+                const spaceBelow = window.innerHeight - rect.bottom - gap;
+                let side = preferred;
+                if (preferred === "top" && spaceAbove < tipHeight + pad && spaceBelow > spaceAbove) {
+                    side = "bottom";
+                } else if (preferred === "bottom" && spaceBelow < tipHeight + pad && spaceAbove > spaceBelow) {
+                    side = "top";
+                }
 
-                content!.style.left = `${rect.left + rect.width / 2}px`;
+                // Update wrapper class so CSS arrow borders match
+                wrapper.classList.toggle("nu-tooltip--top", side === "top");
+                wrapper.classList.toggle("nu-tooltip--bottom", side === "bottom");
 
-                if (side === "top") {
-                    content!.style.top = `${rect.top - gap}px`;
-                    content!.style.transform = "translate(-50%, -100%)";
-                } else {
-                    content!.style.top = `${rect.bottom + gap}px`;
-                    content!.style.transform = "translate(-50%, 0)";
+                content!.style.top = side === "top"
+                    ? `${rect.top - gap}px`
+                    : `${rect.bottom + gap}px`;
+
+                let left = rect.left + rect.width / 2 - tipWidth / 2;
+                left = Math.max(pad, Math.min(left, vw - tipWidth - pad));
+
+                content!.style.left = `${left}px`;
+                content!.style.transform = side === "top" ? "translateY(-100%)" : "";
+
+                // Shift arrow to stay centered on trigger and flip its direction
+                const arrow = content!.querySelector<HTMLElement>(".nu-tooltip__arrow");
+                if (arrow) {
+                    const tipCenter = left + tipWidth / 2;
+                    const triggerCenter = rect.left + rect.width / 2;
+                    const offset = triggerCenter - tipCenter;
+                    arrow.style.left = `calc(50% + ${offset}px)`;
                 }
             }