From 25df9ec47333dcf21c69f8e438fcb3bfe35d921b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=F0=9F=8F=94=EF=B8=8F=20Peak?=
 <122374094+peaklabs-dev@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:29:09 +0200
Subject: [PATCH] fix(ui): center icon tooltips over their trigger (#11382)

---
 resources/views/components/icon-tooltip.blade.php | 4 ++--
 tests/Feature/GlobalIconTooltipTest.php           | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/resources/views/components/icon-tooltip.blade.php b/resources/views/components/icon-tooltip.blade.php
index f492d971b6..de62e8813d 100644
--- a/resources/views/components/icon-tooltip.blade.php
+++ b/resources/views/components/icon-tooltip.blade.php
@@ -38,11 +38,11 @@
         this.visible = true;
         const rect = target.getBoundingClientRect();
         this.below = rect.top < 48;
-        this.x = rect.left;
+        this.x = rect.left + rect.width / 2;
         this.y = this.below ? rect.bottom + 8 : rect.top - 8;
         this.$nextTick(() => {
             const width = this.$refs.tooltip?.offsetWidth || 0;
-            this.x = Math.max(8, Math.min(window.innerWidth - width - 8, this.x));
+            this.x = Math.max(8, Math.min(window.innerWidth - width - 8, this.x - width / 2));
             this.$nextTick(() => this.positioned = true);
         });
     },
diff --git a/tests/Feature/GlobalIconTooltipTest.php b/tests/Feature/GlobalIconTooltipTest.php
index 4ef1947f14..2cc9049299 100644
--- a/tests/Feature/GlobalIconTooltipTest.php
+++ b/tests/Feature/GlobalIconTooltipTest.php
@@ -36,12 +36,11 @@ it('keeps a tooltip hidden until its measured position is applied', function ()
         ->toContain("positioned ? 'visible' : 'invisible'");
 });
 
-it('anchors tooltips to the trigger and lets them grow toward the right', function () {
+it('centers tooltips on the trigger and keeps them within the viewport', function () {
     $tooltip = file_get_contents(resource_path('views/components/icon-tooltip.blade.php'));
 
     expect($tooltip)
-        ->toContain('this.x = rect.left;')
-        ->toContain('Math.min(window.innerWidth - width - 8, this.x)')
-        ->not->toContain('rect.left + rect.width / 2')
+        ->toContain('this.x = rect.left + rect.width / 2;')
+        ->toContain('Math.min(window.innerWidth - width - 8, this.x - width / 2)')
         ->not->toContain('-translate-x-1/2');
 });