tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-09-03 12:21:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): improve tooltip a11y and settings select layout

Browse Source 
Make button and helper tooltips keyboard-focusable with ARIA roles,
close helper popups on outside pointer/focus leave, reserve select
chevron padding, rotate DNS chevron when open, and re-key the service
domain list after row changes.
This commit is contained in:
Andras Bacsai
2026-08-06 08:21:02 +02:00
parent 4f966e3759
commit 232b999cc9
8 changed files with 138 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/forms/button.blade.php
+39 -19
View File
@@ -26,26 +26,45 @@
@endphp
@if ($authDisabled || filled($tooltip))
<span class="relative inline-flex"
x-data="{ visible: false, _t: null }"
@mouseenter="_t = setTimeout(() => {
visible = true;
$nextTick(() => requestAnimationFrame(() => {
const tip = $refs.tip;
if (!tip) return;
const r = $el.getBoundingClientRect();
const t = tip.getBoundingClientRect();
let top = r.top - t.height - 6;
let left = r.left;
if (top < 4) top = r.bottom + 6;
if (left + t.width > innerWidth - 8) left = innerWidth - 8 - t.width;
if (left < 4) left = 4;
tip.style.top = top + 'px';
tip.style.left = left + 'px';
}));
}, 300)"
@mouseleave="clearTimeout(_t); visible = false">
x-data="{
visible: false,
_t: null,
showTooltip(delay = 0) {
clearTimeout(this._t);
this._t = setTimeout(() => {
this.visible = true;
this.positionTooltip();
}, delay);
},
hideTooltip() {
clearTimeout(this._t);
this.visible = false;
},
positionTooltip() {
this.$nextTick(() => requestAnimationFrame(() => {
const tip = this.$refs.tip;
if (!tip) return;
const r = this.$el.getBoundingClientRect();
const t = tip.getBoundingClientRect();
let top = r.top - t.height - 6;
let left = r.left;
if (top < 4) top = r.bottom + 6;
if (left + t.width > innerWidth - 8) left = innerWidth - 8 - t.width;
if (left < 4) left = 4;
tip.style.top = top + 'px';
tip.style.left = left + 'px';
}));
}
}"
@if ($disabled) tabindex="0" :aria-describedby="visible ? $id('button-tooltip') : null" @endif
@mouseenter="showTooltip(300)"
@mouseleave="hideTooltip()"
@focusin="showTooltip()"
@focusout="hideTooltip()"
@click.outside="hideTooltip()">
@endif
<button @disabled($disabled) @if ($isHighlighted) isHighlighted @endif
@if ($authDisabled || filled($tooltip)) :aria-describedby="visible ? $id('button-tooltip') : null" @endif
{{ $attributes->merge(['class' => $defaultClass, 'type' => 'button'])->merge($loadingAttributes) }}
@isset($confirm)
x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
@@ -60,7 +79,8 @@
{{ $slot }}
</button>
@if ($authDisabled || filled($tooltip))
<div x-ref="tip" x-show="visible" x-cloak class="auth-tooltip">
<div x-ref="tip" x-show="visible" x-cloak :id="$id('button-tooltip')" role="tooltip"
class="auth-tooltip">
{{ $tooltip ?: 'You do not have permission to perform this action.' }}
</div>
</span>