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>