Add arrows to tooltips

tests/integration/components/app-menu/settings/nostr-test.gjs

@@ -293,9 +293,30 @@ module('Integration | Component | app-menu/settings/nostr', function (hooks) {
     removeBtn.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
     await settled();
 
+    const tooltip = document.body.querySelector('.tooltip');
     assert.dom('.tooltip', document.body).exists('tooltip appears on hover');
     assert.dom('.tooltip', document.body).hasText('Remove relay');
 
+    // Verify arrow is rendered
+    assert.ok(tooltip.dataset.placement, 'tooltip has placement attribute');
+    const arrowStyle = getComputedStyle(tooltip, '::after');
+    assert.strictEqual(arrowStyle.content, '""', 'arrow pseudo-element exists');
+
+    // Verify arrow points in correct direction based on placement
+    if (tooltip.dataset.placement === 'top') {
+      assert.notStrictEqual(
+        arrowStyle.borderTopColor,
+        'rgba(0, 0, 0, 0)',
+        'arrow points down when tooltip is above trigger'
+      );
+    } else {
+      assert.notStrictEqual(
+        arrowStyle.borderBottomColor,
+        'rgba(0, 0, 0, 0)',
+        'arrow points up when tooltip is below trigger'
+      );
+    }
+
     removeBtn.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
     await settled();