Joseph.Rawlings
e7b33a2f6c
- Updated server card component to use new UI elements and improved layout. - Enhanced status display with badges and better status indicators. - Refined quick info row for server details with consistent styling. - Reorganized server configuration statistics into stat cards for clarity. - Improved help modals for statistics and storage management sections. - Streamlined alerts and warnings for better user experience. - Updated storage management view to utilize new UI components and improve readability.
57 lines
2.0 KiB
PHP
57 lines
2.0 KiB
PHP
{{--
|
|
Tooltip Component - TailServer Theme
|
|
|
|
Usage:
|
|
<x-proxmox::ui.tooltip text="This is a tooltip">
|
|
<button>Hover me</button>
|
|
</x-proxmox::ui.tooltip>
|
|
--}}
|
|
|
|
@props([
|
|
'text',
|
|
'position' => 'top', // top, bottom, left, right
|
|
])
|
|
|
|
@php
|
|
$positions = [
|
|
'top' => 'bottom-full left-1/2 -translate-x-1/2 mb-2',
|
|
'bottom' => 'top-full left-1/2 -translate-x-1/2 mt-2',
|
|
'left' => 'right-full top-1/2 -translate-y-1/2 mr-2',
|
|
'right' => 'left-full top-1/2 -translate-y-1/2 ml-2',
|
|
];
|
|
|
|
$arrows = [
|
|
'top' => 'top-full left-1/2 -translate-x-1/2 border-t-zinc-800 border-x-transparent border-b-transparent border-4',
|
|
'bottom' => 'bottom-full left-1/2 -translate-x-1/2 border-b-zinc-800 border-x-transparent border-t-transparent border-4',
|
|
'left' => 'left-full top-1/2 -translate-y-1/2 border-l-zinc-800 border-y-transparent border-r-transparent border-4',
|
|
'right' => 'right-full top-1/2 -translate-y-1/2 border-r-zinc-800 border-y-transparent border-l-transparent border-4',
|
|
];
|
|
@endphp
|
|
|
|
<div
|
|
x-data="{ show: false }"
|
|
@mouseenter="show = true"
|
|
@mouseleave="show = false"
|
|
class="relative inline-block"
|
|
{{ $attributes }}
|
|
>
|
|
{{ $slot }}
|
|
|
|
<div
|
|
x-show="show"
|
|
x-cloak
|
|
x-transition:enter="transition ease-out duration-150"
|
|
x-transition:enter-start="opacity-0 scale-90"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-90"
|
|
class="absolute z-50 {{ $positions[$position] ?? $positions['top'] }} pointer-events-none"
|
|
>
|
|
<div class="relative bg-zinc-900 text-white text-xs font-medium rounded-lg px-2.5 py-1.5 whitespace-nowrap shadow-xl ring-1 ring-white/10">
|
|
{{ $text }}
|
|
<div class="absolute {{ $arrows[$position] ?? $arrows['top'] }}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|