From bf579df036cbabcd64bb3b232083a34282b96656 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sat, 24 Oct 2026 18:26:36 +0200
Subject: [PATCH] fix(ui): show helper and button tooltips above dropdowns and
 the sidebar

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../views/components/forms/button.blade.php   | 21 +++++++------
 resources/views/components/helper.blade.php   | 31 ++++++++++---------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/resources/views/components/forms/button.blade.php b/resources/views/components/forms/button.blade.php
index ccf0dc55a4..9da3a21525 100644
--- a/resources/views/components/forms/button.blade.php
+++ b/resources/views/components/forms/button.blade.php
@@ -25,7 +25,7 @@
     }
 @endphp
 @if ($authDisabled || filled($tooltip))
-<span class="relative inline-flex"
+<span class="relative inline-flex" x-id="['button-tooltip']"
     x-data="{
         visible: false,
         _t: null,
@@ -79,13 +79,16 @@
     {{ $slot }}
 </button>
 @if ($authDisabled || filled($tooltip))
-    <div x-ref="tip" x-show="visible" x-cloak :id="$id('button-tooltip')" role="tooltip"
-        x-transition:enter="transition-opacity ease-out duration-100"
-        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-        x-transition:leave="transition-opacity ease-in duration-75"
-        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
-        class="auth-tooltip">
-        {{ $tooltip ?: 'You do not have permission to perform this action.' }}
-    </div>
+    {{-- teleported so a dropdown or other stacking context cannot hide or move it --}}
+    <template x-teleport="body">
+        <div x-ref="tip" x-show="visible" x-cloak :id="$id('button-tooltip')" role="tooltip"
+            x-transition:enter="transition-opacity ease-out duration-100"
+            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+            x-transition:leave="transition-opacity ease-in duration-75"
+            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
+            class="auth-tooltip">
+            {{ $tooltip ?: 'You do not have permission to perform this action.' }}
+        </div>
+    </template>
 </span>
 @endif
diff --git a/resources/views/components/helper.blade.php b/resources/views/components/helper.blade.php
index f935e7d47f..7d3a368b61 100644
--- a/resources/views/components/helper.blade.php
+++ b/resources/views/components/helper.blade.php
@@ -92,7 +92,7 @@
 
         this.style += ` top: ${top}px; left: ${left}px;`;
     }
-}" @pointerdown.window="closeWhenPointerIsOutside($event)" @keydown.window.escape="close"
+}" x-id="['helper-popup']" @pointerdown.window="closeWhenPointerIsOutside($event)" @keydown.window.escape="close"
     @resize.window="open && position()" @scroll.window="open && position()"
     {{ $attributes->merge(['class' => 'relative inline-flex align-middle']) }}>
     {{-- button (not div) so label-for associations do not steal the click on mobile --}}
@@ -114,18 +114,21 @@
                 aria-hidden="true" />
         @endisset
     </button>
-    <div x-ref="popup" x-show="open" x-cloak :id="$id('helper-popup')" role="tooltip"
-        x-transition:enter="transition ease-out duration-100"
-        x-transition:enter-start="opacity-0 translate-y-0.5"
-        x-transition:enter-end="opacity-100 translate-y-0"
-        x-transition:leave="transition ease-in duration-75"
-        x-transition:leave-start="opacity-100"
-        x-transition:leave-end="opacity-0"
-        :style="style"
-        class="info-helper-popup fixed z-[10000] w-max max-w-[min(20rem,calc(100vw-2rem))] whitespace-normal"
-        @mouseenter="cancelHide()" @mouseleave="hide()" @focusout="closeWhenFocusLeaves()" @click.stop>
-        <div class="px-3 py-2.5 text-[13px] leading-5">
-            {!! $helper !!}
+    {{-- teleported so a dropdown or other stacking context cannot put it under the sidebar --}}
+    <template x-teleport="body">
+        <div x-ref="popup" x-show="open" x-cloak :id="$id('helper-popup')" role="tooltip"
+            x-transition:enter="transition ease-out duration-100"
+            x-transition:enter-start="opacity-0 translate-y-0.5"
+            x-transition:enter-end="opacity-100 translate-y-0"
+            x-transition:leave="transition ease-in duration-75"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+            :style="style"
+            class="info-helper-popup fixed z-[10000] w-max max-w-[min(20rem,calc(100vw-2rem))] whitespace-normal"
+            @mouseenter="cancelHide()" @mouseleave="hide()" @focusout="closeWhenFocusLeaves()" @click.stop>
+            <div class="px-3 py-2.5 text-[13px] leading-5">
+                {!! $helper !!}
+            </div>
         </div>
-    </div>
+    </template>
 </div>