@mlola-ui/behavior 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/behavior",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Framework-free behavior for Mlola UI markup: standard DOM, no runtime peers",
   "type": "module",
   "main": "./src/index.js",

package/src/index.js

@@ -21,6 +21,7 @@ import {
   clampToStep,
   focusTrapIndex,
   percentOf,
+  fitTooltip,
   placeFloating,
   rovingIndex,
   sliderValueForKey,
@@ -487,6 +488,7 @@ const behaviors = {
     const trigger = root.firstElementChild;
     if (!tip || !trigger) return [];
     const delay = Number(root.dataset.mlDelay ?? 200);
+    const side = tip.dataset.side || "top";
     let timer = null;
 
     const show = () => {
@@ -494,6 +496,13 @@ const behaviors = {
       timer = setTimeout(() => {
         tip.hidden = false;
         tip.dataset.state = "open";
+        // Measure from the side the markup asks for, then flip or slide to stay on screen.
+        tip.dataset.side = side;
+        tip.style.removeProperty("--ml-tooltip-shift");
+        const a = trigger.getBoundingClientRect();
+        const fit = fitTooltip({ x: a.left, y: a.top, width: a.width, height: a.height }, { width: tip.offsetWidth, height: tip.offsetHeight }, { width: document.documentElement.clientWidth, height: window.innerHeight }, side);
+        tip.dataset.side = fit.side;
+        tip.style.setProperty("--ml-tooltip-shift", `${fit.shift}px`);
         if (tip.id) trigger.setAttribute("aria-describedby", tip.id);
       }, Math.max(0, delay));
     };

package/src/interaction.js

@@ -166,3 +166,20 @@ export function placeFloating(anchor, floating, viewport, { side = "bottom", ali
   y = Math.min(Math.max(y, padding), Math.max(padding, viewport.height - floating.height - padding));
   return { x: Math.round(x), y: Math.round(y), side: chosen };
 }
+
+/**
+ * Where a tooltip anchored beside its trigger by CSS should sit to stay on
+ * screen: the side it opens on (flipped when the other has more room, or
+ * moved above when neither side has room across), and how far to slide it
+ * along that edge. The arrow slides back by the same amount, so it still
+ * points at the trigger.
+ */
+export function fitTooltip(anchor, tip, viewport, side = "top", { offset = 8, padding = 8 } = {}) {
+  const across = side === "left" || side === "right";
+  const roomAcross = Math.max(anchor.x, viewport.width - anchor.x - anchor.width) - padding;
+  const wanted = across && tip.width + offset > roomAcross ? "top" : side;
+  const placed = placeFloating(anchor, tip, viewport, { side: wanted, align: "center", offset, padding });
+  const vertical = placed.side === "top" || placed.side === "bottom";
+  const centered = vertical ? anchor.x + anchor.width / 2 - tip.width / 2 : anchor.y + anchor.height / 2 - tip.height / 2;
+  return { side: placed.side, shift: Math.round((vertical ? placed.x : placed.y) - centered) };
+}

package/src/logic.d.ts

@@ -134,3 +134,12 @@ export function placeFloating(
   viewport: { width: number; height: number },
   options?: { side?: Side; align?: Align; offset?: number; padding?: number },
 ): Placement;
+
+/** A CSS-anchored tooltip's side and its slide along that edge to stay on screen. */
+export function fitTooltip(
+  anchor: Rect,
+  tip: { width: number; height: number },
+  viewport: { width: number; height: number },
+  side?: Side,
+  options?: { offset?: number; padding?: number },
+): { side: Side; shift: number };