Tooltip code

@props([
    'text',
    'position' => 'top',
])

@php
    /*
    | Hover/focus tooltip wrapping its slot trigger.
    |
    | position: top, bottom, left, right
    |
    | Usage:
    |   <x-ui.tooltip text="Copy to clipboard">
    |       <x-ui.icon-button icon="copy" label="Copy" />
    |   </x-ui.tooltip>
    */
    $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 me-2',
        'right' => 'left-full top-1/2 -translate-y-1/2 ms-2',
    ];
@endphp

<span
    x-data="{ show: false }"
    @mouseenter="show = true" @mouseleave="show = false"
    @focusin="show = true" @focusout="show = false"
    {{ $attributes->merge(['class' => 'relative inline-flex']) }}
>
    {{ $slot }}

    <span
        x-show="show" x-cloak x-transition.opacity.duration.150ms
        role="tooltip"
        class="absolute z-50 whitespace-nowrap rounded-lg bg-gray-900 dark:bg-gray-700 px-2.5 py-1.5 text-xs font-medium text-white shadow-lg pointer-events-none {{ $positions[$position] ?? $positions['top'] }}"
    >
        {{ $text }}
    </span>
</span>