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 = () => {

app/styles/app.css

@@ -728,6 +728,26 @@ body {
   animation: tooltip-fade-in 0.15s ease;
 }
 
+.tooltip::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  left: var(--arrow-left, 50%);
+  transform: translateX(-50%);
+}
+
+.tooltip[data-placement='top']::after {
+  top: 100%;
+  border-top-color: var(--body-text-color);
+}
+
+.tooltip[data-placement='bottom']::after {
+  bottom: 100%;
+  border-bottom-color: var(--body-text-color);
+}
+
 @keyframes tooltip-fade-in {
   from {
     opacity: 0;