starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-11-06 13:10:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): show helper and button tooltips above dropdowns and the sidebar

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai
2026-10-24 18:26:36 +02:00
co-authored by Claude Opus 5.5
parent ff4939a06f
commit bf579df036
2 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/forms/button.blade.php
+12 -9
View File
@@ -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
resources/views/components/helper.blade.php
+17 -14
View File
@@ -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>