Joseph.Rawlings
abff5a381f
- Updated tab-panel component to use Tailwind for styling and transitions. - Refactored table-row component to implement Tailwind classes for hover effects and borders. - Converted table-td component to utilize Tailwind for alignment and text styles. - Changed table-th component to apply Tailwind for header styling and sorting indicators. - Revised table component to adopt Tailwind for layout, borders, and responsive design. - Enhanced tabs component with Tailwind for navigation styles and transitions. - Updated toggle component to use Tailwind for switch styles and accessibility. - Refactored tooltip component to implement Tailwind for positioning and styling. - Added visual enhancements to app.css for improved UI interactions and animations.
50 lines
1.4 KiB
PHP
50 lines
1.4 KiB
PHP
{{--
|
|
Tooltip Component - LucentUI Theme
|
|
Migrated from AdminLTE to Tailwind
|
|
|
|
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
|
|
$positionClasses = [
|
|
'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',
|
|
];
|
|
@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"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-100"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="absolute z-[1070] pointer-events-none {{ $positionClasses[$position] ?? $positionClasses['top'] }}"
|
|
>
|
|
<div class="px-3 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-600 rounded-lg shadow-lg whitespace-nowrap">
|
|
{{ $text }}
|
|
</div>
|
|
</div>
|
|
</div>
|