Joseph.Rawlings
760cf84451
- Introduced AdminLTE CSS variables for color palette, body colors, card styles, and button styles. - Implemented card components with variants for primary, success, warning, danger, and info. - Added button styles including sizes and outline variants. - Created form controls, select inputs, and input groups with consistent styling. - Included utility classes for text and background colors, gradients, and shadows. - Developed components for badges, alerts, callouts, progress bars, tables, small boxes, and info boxes. - Integrated modal, dropdown, spinner, tooltip, and direct chat styles. - Established timeline and close button styles, with dark mode support for specific components.
75 lines
2.0 KiB
PHP
75 lines
2.0 KiB
PHP
{{--
|
|
Tooltip Component - AdminLTE style
|
|
|
|
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
|
|
$positionStyles = [
|
|
'top' => 'bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem;',
|
|
'bottom' => 'top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.5rem;',
|
|
'left' => 'right: 100%; top: 50%; transform: translateY(-50%); margin-right: 0.5rem;',
|
|
'right' => 'left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.5rem;',
|
|
];
|
|
@endphp
|
|
|
|
<style>
|
|
.tooltip-lte-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.tooltip-lte {
|
|
position: absolute;
|
|
z-index: 1070;
|
|
pointer-events: none;
|
|
}
|
|
.tooltip-lte-inner {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
background-color: #212529;
|
|
border-radius: var(--lte-border-radius, 0.375rem);
|
|
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
|
|
white-space: nowrap;
|
|
}
|
|
.dark .tooltip-lte-inner {
|
|
background-color: #4b5563;
|
|
}
|
|
</style>
|
|
|
|
<div
|
|
x-data="{ show: false }"
|
|
@mouseenter="show = true"
|
|
@mouseleave="show = false"
|
|
class="tooltip-lte-wrapper"
|
|
{{ $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="tooltip-lte"
|
|
style="{{ $positionStyles[$position] ?? $positionStyles['top'] }}"
|
|
>
|
|
<div class="tooltip-lte-inner">
|
|
{{ $text }}
|
|
</div>
|
|
</div>
|
|
</div>
|