Add arrows to tooltips

app/modifiers/tooltip.js

@@ -16,17 +16,30 @@ export default modifier((element) => {
 
     const rect = element.getBoundingClientRect();
     const tipRect = tooltipEl.getBoundingClientRect();
-    const margin = 6;
-    let top = rect.top - tipRect.height - margin;
-    if (top < margin) top = rect.bottom + margin;
+    const arrowSize = 6;
+
+    // Vertical placement: above trigger, flip below if no room
+    let placement = 'top';
+    let top = rect.top - tipRect.height - arrowSize;
+    if (top < arrowSize) {
+      placement = 'bottom';
+      top = rect.bottom + arrowSize;
+    }
+
+    // Horizontal: center on trigger, clamp to viewport
     let left = rect.left + rect.width / 2 - tipRect.width / 2;
     left = Math.max(
-      margin,
-      Math.min(left, window.innerWidth - tipRect.width - margin)
+      arrowSize,
+      Math.min(left, window.innerWidth - tipRect.width - arrowSize)
     );
 
+    // Arrow always points at trigger center, even when clamped
+    const arrowLeft = rect.left + rect.width / 2 - left;
+
+    tooltipEl.dataset.placement = placement;
     tooltipEl.style.top = `${top}px`;
     tooltipEl.style.left = `${left}px`;
+    tooltipEl.style.setProperty('--arrow-left', `${arrowLeft}px`);
   };
 
   const hide = () => {